xingbofeng commented 5 years ago

前端性能优化清单

一、性能监控

1.1 监控性能的目的

1.2 前端性能优化指标

1.3 明确性能优化目标

1.3.1 渐进式加载

1.3.2 首屏白屏

1.3.3 首屏可见

1.3.4 首屏完全可交互

1.4 收集性能监控数据

1.4.1 需要那些数据

1.4.2 performance API

1.4.3 接口请求耗时上报

1.5 打造性能监控系统

1.5.1 WebPagetest

1.5.2 Page Speed

1.5.3 监控真实线上数据

1.5.4 构建性能监控报表

1.6 实战——测速平台

二、网络优化

合并请求

使用CDN

拆分域名

Gzip压缩

使用HTTP2

Keep-Alive

使用HTTP缓存

三、静态资源优化

3.1 prefetch、preload

3.2 渐进式加载

3.3 图片加载优化

3.3.1 使用base64

3.3.2 使用Webp

3.4 Web字体优化

四、CSS优化

4.1 避免嵌套过深

4.2 避免不必要的重绘

4.3 CSS动画优化

...

五、JavaScript优化

5.1 缓存必要的数据（内存/全局状态、localStorage、sessionStorage、cookie）

5.2 使用Web Worker

5.3 使用Serive Worker缓存请求数据

5.4 JavaScript事件优化（事件委托、事件节流）

5.5 使用WebAssembly

六、浏览器渲染优化

6.1 重绘和回流

6.2 最小化DOM访问

...待补充

七、Canvas优化

八、开启服务端渲染

九、构建优化

JS/CSS 打包

模块动态加载

Tree Shaking

分模块引入

十、交付优化

JS脚本：异步加载

CSS：首屏加载必要的CSS

分页、预加载、懒加载

使用流进行响应

十一、其它性能优化趋势

11.1 HTTP 3.0

aircloud commented 5 years ago

建议新增（可以充实一下交付优化）：

编译优化： JS/CSS 打包、动态加载、 TreeShaking、分模块引入等等

一些补充点和idea（未完待续）

应当适当补充一些定义性内容，比如生产环境中比较关注的性能点（首屏、白屏、首元素、可交互时间等），然后基于此有目的的进行报表分析。

2.性能优化其实是一个全链路的过程，从后端、DNS、CDN到客户端WebView或动态化、再到前端，如果仅仅说前端，实际上来说目前的实际作用已经不大了，因为仅仅凭这些也是不够的，可以想想是否有可发散的点，当然这个也可以没有，再议即可。

上述优化，其实是有影响力排序的，比如有些优化的点是影响非常大的，如服务器端渲染首屏等，我们其实可以在某些场景下量化一下各个方式，排个序或评个分什么的，也可以当成本书的特色，从而指导开发者重点关注哪些。

xuexb commented 5 years ago

Gzip

Google 推出了 Brotli 压缩~

xingbofeng commented 5 years ago

@aircloud 哈哈感谢大佬建议编译（Webpack打包）优化这一点确实有遗漏了。想动态模块引入、Tree Shaking 这些都是平常非常常用的点，可以附在清单里面

2、其实主题放在前端性能优化，最开始的定位是想写一本更接地气的书，如果说要穿插讲后端、客户端WebView这些优化的话，个人觉得没有太大必要，但是DNS CDN这些跟前端也沾得上边的，确实有可发散的点。看看是不是在网络优化那一章进行拓展

3、影响力这个确实，我们可以私下再商量具体的排序。

xingbofeng commented 5 years ago

@xuexb 哈哈感谢大佬建议以后会注意技术名词的准确性

xingbofeng / xingbofeng.github.io