前端性能优化总结

张仪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的有缓存,性能稍好
    • 虚拟列表
阅读 344
368 声望
4 粉丝
0 条评论
你知道吗?

368 声望
4 粉丝
文章目录
宣传栏