性能优化.md

性能优化

网络

资源加载

代码层

• 资源被短时间内重复加载 解决：平时写代码注意查看接口是否重复调用多次（页面加载、点击按请求时）

• 加载了无效资源 解决：根据业务环境，减少不必要的网络请求。经典的例子就是图片的懒加载，如果长页面 暂时没有滚动到对应的图片为止，就不要让它加载。减少了不必要的网络请求

• 不合理的串联请求 使用并发请求，全部完成后，再统一跑加载完成逻辑

  // 这是串行写法
  async fetchData1 () {
    // 执行完一个再执行下一个
    await fetchStudent()
    await fetchTeacher()
    await fetchSchool()
  }
  // 这是并行写法
  async fetchData2 () {
    await Promise.all([
      // 互相之间无等待关系
      fetchStudent(),
      fetchTeacher(),
      fetchSchool()
    ])
  }
  

• 合理的使用预加载

  • prefetch
  • prerender
  • preload

  在页面都完成核心网络逻辑数据和资源后，可以考虑预加载（根据判断当前网络的速度，不宜对过大的内容预加载）

非代码层

• 前端icon优化
• 浏览器上HTTP1.1及一下并发性只有6-8，iOS客户端上是4 解决：升级HTTP2.0，解决队头阻塞。 或者http1.1的时候使用多个域名发送请求资源。（图片域名和内容域名分开，原因是可能一个网站的图片很多>6，而且图片一般比较大加载时间长，所以文字+CSS和图片分开，让图片和文字+CSS可以得到最大并发）
• 单个页面资源过大 解决：使用Webpack分包，分包过后，考虑那些是必要的，那些是非必要的。（非必要的进行异步加载） 写代码时，引入库不要整个模块引入，仅仅引入对应的功能
• CSS图片使用雪碧图（多个小图片合成一个图片来下载，减少HTTP请求数量）
• tree shaking去除无用代码
• 压缩JS和CSS，大型库裁剪不需要的功能或者寻找小型的库，或者自己简单封装
• 增加浏览器本地缓存，HTTP缓存策略
• 使用CDN，减少资源的传递路径
• css放在头部、js放在底部

渲染阻塞问题

异步无阻塞加载JS

• defer
• async
• 动态创建script

JS运行性能

• 函数节流及防抖
• DOM减少频繁的添加和修改结构和删除操作。使用创建一个DocumentFragment来组成新插入的HTML元素https://www.jianshu.com/p/a42d4e72ae29
• 对DOM的属性获取，进来查询一次，并且就缓存到变量中。减少内部计算

参考

https://medium.com/@banyudu/%E4%BC%98%E5%8C%96%E5%89%8D%E7%AB%AF%E5%BA%94%E7%94%A8%E6%80%A7%E8%83%BD-%E7%BD%91%E7%BB%9C%E7%AF%87-b94feefeb8b0

https://juejin.cn/post/6844903798926737421