前端性能优化总结

Posted 2021-09-07 张仪ranck

本文将记录我所掌握的全部整套前端性能优化模型

http协议层面

• http协议缓存（应用缓存，浏览器默认缓存，自定义浏览器缓存，代理服务器缓存，服务器缓存）
• gzip压缩
• chrome并发6个请求
• 使用loading优化请求中的体验
• 预加载 PreloadJS （浏览器缓存）

工程化

• 图片base64
• 代码切割
• 按需加载 BundleAnalyzerPlugin
• 静态分离，第三方库，cdn缓存 externals分离 htmlWebpackPlugin插入
• 代码压缩
• 快速打包 多内核打包 cpu核

编码

• html

  • 减少标签使用数量
  • 正确合理嵌套且语义化

• css

  • 加载优化

    • 前置加载
    • 不适用@import，使用link
    • 雪碧或者直接第三方字体库或者转base64减少加载数

  • 选择器优化

    • 少使用标签选择器，
    • 组合选择器不超过3层
    • 避免使用通配符
    • reset合理适量

  • 渲染优化

    • transform实现动画性能更高，非主线程的合成动画
    • 特定元素设置高度减少重排
    • css代替图片

  • 代码体积

    • 提取公共css
    • css简写 padding margin background border font
    • 省略0的单位
    • 使用属性继承

• js

  • 事件委托
  • Fragment处理dom片段
  • 防抖节流
  • 需查询和计算的结果使用变量缓存
  • 缩短函数访问变量的作用域链，变量缓存
  • for循环 > for-of > forEach > for-in（数据量大的时候考虑，不然几十条数据真没意义）

• vue

  • 减少data内部数据
  • Object.freeze (有可行性，待验证)
  • 必要时候使用eventBus传数据，减少绑定了大量监听数据
  • 路由懒加载 + 适当合并 /* webpackChunkName: "plugins/module" */
  • for循环 + key => patch 算法
  • for的优先级更高，if可以提前到外层，另外可以考虑计算后过滤掉不渲染数据然后再去渲染
  • 他们说computed的有缓存，性能稍好
  • 虚拟列表