前端性能优化—

前端性能优化——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.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>