性能优化方方面面
这个世界贫富两极分化的根源是制度成本被弱势群体所承担，而制度收益被强势群体所占有
——温铁军
面试里只要你简历上写了把网站速度提升了 XX%，大多面试官会问你具体做了什么，有什么指标？
我想这其中包含了方方面面的知识点
我们做性能优化的原因是希望网站能快速访问，就像日本人通过阿部宽的网站来测试网络是否正常，我想如果前端将一个网站优化到秒进，那对其来说是一个很大的褒奖
现代前端应该做些什么方面的性能优化呢？以前的优化手段有哪些呢
这一章，我们从性能优化的方方面面着手
性能优化就像一根线，将前端工程化（webpack 的打包优化，构建优化）、React 的性能优化、网络的优化（HTTP 缓存、HTTP2 多路复用）、页面构建方面（回流和重绘）、防抖、节流等串起来
| 优化方向 | 优化手段 |
|---|---|
| 请求数量 | 合并脚本和样式表，拆分初始化负载 |
| 请求带宽 | 移除重复脚本 |
| 缓存利用 | 添加 Expires 头，配置 ETag，使 Ajax 可缓存 |
| 页面结构 | 将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出 |
小程序的性能优化考察点：
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#11. 图片请求数
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 批量更新