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

前端性能优化——javascript

news 2025/9/15 20:19:28

优化处理：

讲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>