当前位置: 首页 > news >正文

前端性能优化——javascript

优化处理:

讲javascript脚本文件放到body标记的后面

减少页面当中所包含的script标记的数量

课堂练习:

脚本优化处理

使用原生JavaScript完成操作过程。

document.querySelector     document.querySelectorAll

classList以及类的操作API

Element.classList - Web API 接口参考 | MDN

高性能的网络请求

Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。

传统网络请求:

fetch网络请求:

fetch() - Web API 接口参考 | MDN

formidable - npm

创建后端

koa2 -e koa-server

cd koa-server

npm install

npm install koa-cors

npm install formidable

进入到koa-server/app.js

添加:const cors = require("koa-cors")

app.use(cors())

index.js

const router = require('koa-router')()
const {formidable} = require('formidable')router.get('/', async (ctx, next) => {ctx.body = {status: 'koa2'}
})router.post('/add',(ctx,next)=>{let body=ctx.request.bodyconsole.log(body)// console.log(ctx.request.body.name)ctx.body ={status: 'success'}
})router.post('/upload',async(ctx,next)=>{let form=formidable({uploadDir:__dirname,keepExtensions:true})await new Promise((resolve,reject)=>{form.parse(ctx.req,(err,fields,files)=>{if(err){reject(err)return}console.log(fields)console.log(files)ctx.set('Content-type','application/json')ctx.status=200ctx.state={fields,files}ctx.body=JSON.stringify(ctx.state,null,2)resolve()})})})router.get('/string', async (ctx, next) => {ctx.body = 'koa2 string'
})router.get('/json', async (ctx, next) => {ctx.body = {title: 'koa2 json'}
})module.exports = router

前端页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" id="file" />
</body>
<script>fetch('http://localhost:3000/',{method: 'GET',// body:JSON.stringify({})   get请求不需要bodymode: 'cors'})// 服务端返回的数据格式  json()  text()  blob().then(res => res.json())// 服务端接受数据.then(data => {console.log(data)})fetch('http://localhost:3000/add',{method: 'POST',body:JSON.stringify({name:'张三'}),mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})const file = document.querySelector('#file');file.onchange = function () {// console.log(file.files)let uploadFile = file.files[0];let formData = new FormData();formData.append('file',uploadFile);fetch('http://localhost:3000/upload',{method: 'POST',body:formData,mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})}
</script>
</html>
高性能的动画处理

Window:requestAnimationFrame() 方法 - Web API 接口参考 | MDN

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" id="file" />
</body>
<script>fetch('http://localhost:3000/',{method: 'GET',// body:JSON.stringify({})   get请求不需要bodymode: 'cors'})// 服务端返回的数据格式  json()  text()  blob().then(res => res.json())// 服务端接受数据.then(data => {console.log(data)})fetch('http://localhost:3000/add',{method: 'POST',body:JSON.stringify({name:'张三'}),mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})const file = document.querySelector('#file');file.onchange = function () {// console.log(file.files)let uploadFile = file.files[0];let formData = new FormData();formData.append('file',uploadFile);fetch('http://localhost:3000/upload',{method: 'POST',body:formData,mode: 'cors'}).then(res => res.json()).then(data => {console.log(data)})}
</script>
</html>
视频演示

fetch请求和高性能动画处理

js语言层级优化(减少页面中的dom操作)

对比前,有很多的dom操作,并且直接写在循环里面了

优化:把它们转存一下

相关文章:

前端性能优化——javascript

优化处理&#xff1a; 讲javascript脚本文件放到body标记的后面 减少页面当中所包含的script标记的数量 课堂练习&#xff1a; 脚本优化处理 使用原生JavaScript完成操作过程。 document.querySelector document.querySelectorAll classList以及类的操作API Element.class…...

Docker容器化技术(使用Docker搭建论坛)

第一步&#xff1a;删除容器镜像文件 [rootlocalhost ~]# docker rm -f docker ps -aq b09ee6438986 e0fe8ebf3ba1第二步&#xff1a;使用docker拉取数据库 [rootlocalhost ~]# docker run -d --name db mysql:5.7 02a4e5bfffdc81cb6403985fe4cd6acb0c5fab0b19edf9f5b8274783…...

C# ListView 控件使用

1.基本设置 listView1.Columns.Add("序号", 60); //向 listView1控件中添加1列 同时设置列名称和宽度listView1.Columns.Add("温度", 100); //下同listView1.Columns.Add("偏移", 100);listView1.Columns.Add("分割", 50);listView1…...

【string一些函数用法的补充】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 string类对象的修改操作 我们来看 c_str 返回c格式的字符串的操作&#xff1a; 我们来看 rfind 和 substr 的操作&#xff1a; string类非成员函数 我们来看 r…...

【Go】令牌桶限流算法

1. 限流 限流&#xff0c;顾名思义&#xff0c;限制用户请求流量&#xff0c;避免大规模并发导致系统宕机。 2. 令牌桶算法 令牌管理员以恒定的速率向令牌桶里放置一个令牌。如果桶满&#xff0c;就丢弃令牌。 请求到达时&#xff0c;都要先去令牌桶里取一个令牌&#xff0c…...

go的slice学习

并发访问slice 线上出现一粒多协程并发append全局slice的情况&#xff0c;导致内存不断翻倍&#xff0c;因此对slice的使用需要重新考虑。 并发读写的情况下&#xff0c; 可以利用锁、channel等避免竞态 问题 func TestDemo32(t *testing.T) {var wg sync.WaitGroupvar n 1…...

软件设计师17--磁盘管理

软件设计师17--磁盘管理 考点1&#xff1a;存储管理 - 磁盘管理调度算法磁盘调度 - FCFS磁盘调度 - SSTF例题&#xff1a; 考点1&#xff1a;存储管理 - 磁盘管理 存取时间寻道时间等待时间&#xff0c;训导时间是指磁头移动到磁道所需的时间&#xff1b;等待时间为等待读写的扇…...

学点Java打小工——Day2Day3一点作业

1 猜数字&#xff08;10次机会&#xff09; 随机生成[1,1000]的一个数&#xff0c;输入你猜的数程序会给出反馈&#xff0c;直到猜对或次数用尽(10次)。 //猜数字 10次机会Testpublic void guessNumber() {Random random new Random();// [0, 1000) 1// [1, 1000]int num ra…...

【话题】2024年AI辅助研发趋势,有那些应用领域

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读文章&#xff01; 此篇是【话题达人】系列文章&#xff0c;这一次的话题是《2024年AI辅助研发趋势》 目录 背景概念实践医药领域汽车设计领域展望未来文章推荐 背景 随着人工智能技术的持续发展与突破&#xff0c;2024年AI辅…...

蓝桥杯——数组切分

数组切分 题目分析 这里要搞清楚一个点就是满足区间内数字是连续数字的区间有什么样的特点&#xff0c;既然数字连续重新排列后的数字为n,n1,n2,n3,n4,…nlen&#xff0c;则最大数字和最小数字之差恰好是区间长度减1&#xff0c;即nlen-nlen&#xff0c;同样因为下标也是连续…...

【机器学习】进阶学习:详细解析Sklearn中的MinMaxScaler---原理、应用、源码与注意事项

【机器学习】进阶学习&#xff1a;详细解析Sklearn中的MinMaxScaler—原理、应用、源码与注意事项 这篇文章的质量分达到了97分&#xff0c;虽然满分是100分&#xff0c;但已经相当接近完美了。请您耐心阅读&#xff0c;我相信您一定能从中获得不少宝贵的收获和启发~ &#x1f…...

数据库是什么?数据库连接、管理与分析工具推荐

一、数据库是什么&#xff1f; 数据库是一种结构化的数据存储系统&#xff0c;用于有效地组织、存储和管理大量的数据。它是一个集中化的数据存储库&#xff0c;通常由一个或多个数据表组成&#xff0c;每个数据表包含多个行和列&#xff0c;用于存储特定类型的数据。数据表中…...

【C#算法实现】可见的山峰对数量

文章目录 前言一、题目要求二、算法设计及代码实现2.1 算法思想2.2 代码实现 前言 本文是【程序员代码面试指南&#xff08;第二版&#xff09;学习笔记】C#版算法实现系列之一&#xff0c;用C#实现了《程序员代码面试指南》&#xff08;第二版&#xff09;栈和队列中的可见的…...

Selenium 隐藏浏览器指纹特征的几种方式

文章转载于&#xff1a;https://mp.weixin.qq.com/s/sXRXwMDqekUHfU2SnL-PYg 我们使用 Selenium 对网页进行爬虫时&#xff0c;如果不做任何处理直接进行爬取&#xff0c;会导致很多特征是暴露的 对一些做了反爬的网站&#xff0c;做了特征检测&#xff0c;用来阻止一些恶意爬虫…...

k8s发布nacos-server,nodeport配置注意事项

k8s发布nacos-server注册不上问题 问题描述&#xff1a;分析过程&#xff1a; 问题描述&#xff1a; k8s发布nacos-server做服务公用使用&#xff0c;nodeport暴漏服务给客户端注册&#xff0c; nacos:端口 8848&#xff1a;30601 9848&#xff1a;30701 分析过程&#xff1a…...

伪分布式Spark集群搭建

一、软件环境 软 件 版 本 安 装 包 VMware虚拟机 16 VMware-workstation-full-16.2.2-19200509.exe SSH连接工具 FinalShell Linux OS CentOS7.5 CentOS-7.5-x86_64-DVD-1804.iso JDK 1.8 jdk-8u161-linux-x64.tar.gz Spark 3.2.1 spark-3.2.1-bin-…...

Android 监听卫星导航系统状态及卫星测量数据变化

源码 package com.android.circlescalebar;import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.core.app.ActivityCompat; import androidx.core.content.ContextCompat; import android.Manifest; import android.conte…...

鸿蒙培训开发:就业市场的新热点~

金三银四在即&#xff0c;随着春节假期结束&#xff0c;各行各业纷纷复工复产&#xff0c;2024年的春季招聘市场也迎来了火爆的局面。最近发布的《2024年春招市场行情周报&#xff08;第一期&#xff09;》显示&#xff0c;尽管整体就业市场仍处于人才饱和状态&#xff0c;但华…...

【C++】string的底层剖析以及模拟实现

一、字符串类的认识 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c; 但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&a…...

Unity的PICO项目基础环境搭建笔记(调试与构建应用篇)

文章目录 前言一、为设备开启开发者模式1、开启PICO VR一体机。前往设置>通用>关于本机>软件版本号2、一直点击 软件版本号 &#xff0c;直到出现 开发者 选项3、进入 开发者模式&#xff0c;打开 USB调试&#xff0c;选择 文件传输 二、实时预览应用场景1、下载PC端的…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...