优化处理:
讲javascript脚本文件放到body标记的后面
减少页面当中所包含的script标记的数量
课堂练习:
脚本优化处理
使用原生JavaScript完成操作过程。
document.querySelector document.querySelectorAll
classList以及类的操作API
Element.classList - Web API 接口参考 | MDN
高性能的网络请求
Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。
传统网络请求:
fetch网络请求:
创建后端
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.body
console.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=200
ctx.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请求不需要body
mode: '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请求不需要body
mode: '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操作,并且直接写在循环里面了
优化:把它们转存一下