性能优化方方面面

这个世界贫富两极分化的根源是制度成本被弱势群体所承担,而制度收益被强势群体所占有

——温铁军

面试里只要你简历上写了把网站速度提升了 XX%,大多面试官会问你具体做了什么,有什么指标?

我想这其中包含了方方面面的知识点

我们做性能优化的原因是希望网站能快速访问,就像日本人通过阿部宽的网站open in new window来测试网络是否正常,我想如果前端将一个网站优化到秒进,那对其来说是一个很大的褒奖

现代前端应该做些什么方面的性能优化呢?以前的优化手段有哪些呢

这一章,我们从性能优化的方方面面着手

性能优化就像一根线,将前端工程化(webpack 的打包优化,构建优化)、React 的性能优化、网络的优化(HTTP 缓存、HTTP2 多路复用)、页面构建方面(回流和重绘)、防抖、节流等串起来

优化方向优化手段
请求数量合并脚本和样式表,拆分初始化负载
请求带宽移除重复脚本
缓存利用添加 Expires 头,配置 ETag,使 Ajax 可缓存
页面结构将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出

小程序的性能优化考察点:

https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#11. 图片请求数open in new window

1.首屏时间

2.渲染时间

3.脚本执行时间

4.setState 调用频率

5.setState 数据大小

6.WXML 节点数

7.图片缓存

8.图片大小

9.请求耗时

10.网络请求数

11.图片请求数

12.网络请求缓存

打包优化

  • webpack
    • loader
    • dll
    • happypack
    • 代码压缩
    • tree shaking
    • scope hositing
    • code splitting
  • 图片 base64,cdn

网络优化

  • dns
  • cdn
  • 缓存
  • preload/prefetch/懒加载
  • ssr

代码优化

  • loading/骨架屏
  • web worker
  • 虚拟列表
  • 懒加载
  • dom/style 批量更新

参考资料

Last Updated:
Contributors: johan