前端性能优化思路

浏览器→资源→图片→代码层面

web前端性能优化（全汇总） - 掘金 (juejin.cn)

优化模块

1. 浏览器

1.1 减少HTTP请求

如Chrome浏览器最多同时允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别，减少http请求也就是减少我们html里css/js等资源的数量

1.2 使用HTTP2.0

http2.0优势：

1. 采用二进制格式传输数据, 1.1是文本格式
2. 对消息头采用Hpack进行压缩传输，能够节省消息头占用的网络流量，1.1每次请求，都会携带大量冗余的头信息，浪费了很多宽带资源
3. 异步连接多路复用
4. Server Push，服务器端能够更快的把资源推送到客户端
5. 保持与HTTP 1.1语义的向后兼容性也是该版本的一个关键

1.3 设置浏览器缓存策略

1.4 白屏时间加载动画

用户体验

2. 资源

2.1 静态资源CDN

2.2 静态资源单独域名

2.3 gzip压缩

2.4 做服务端渲染（SSR）

2.5 将CSS放在文件头部，JavaScript文件放在底部

涉及到了浏览器的运行流程了

3. 图片

3.1 字体图标代替图片图标

3.2 精灵图

3.3 图片懒加载

金字塔

3.4 图片预加载

3.5 使用png格式的图片

3.6 小于10k的图片可以打包为base64格式

4. 代码

4.1 慎用全局变量

4.2 缓存全局变量

4.3 减少重绘回流

4.4 节流、防抖

4.5 少用闭包、减少内存泄漏

4.6 减少数据读取次数

4.7 文档碎片优化节点添加

4.8 减少判断层级

4.9 字面量与构造式

5. 项目方案提议

5.1 长列表优化

5.2 web worker

5.3 避免 ifarme 嵌套网页

6.webpack优化

6.1 减小代码体积

6.2 按需加载

6.3 提取第三库代码

6.4 webpack dll优化