前端性能优化
性能衡量指标
指标：
- 白屏时间
- 首屏时间
- 用户可交互时间
- 完全加载时间
- 首字节时间
- DNS
- 解析时间
- TCP 连接时间
- HTTP 请求时间
-
HTTP 响应时间
维度：
- 运营商
- 网络
- URL
性能优化
- 高频事件消抖、节流。使用
_.debounce()和_. throttle()，控制高频事件的操作，如：scroll、onChange - JavaScritp很快，但是DOM很慢，减少修改DOM。
- DOM的渲染需要计算DOM+CSSOM，每次DOM和CSSOM的每次修改都会触发重绘；
- 渲染过程：JavaScript -> Style -> Layoout -> Paint -> Composite
- 避免
position: fixed;布局，Z轴图层堆叠关系会改变，引起重绘； - 图层隔离：将那些会变动的元素提升至单独的图层，比如：动画、渐变；
- 降低图层复杂度；
- 避免线程阻塞；
- 优化CSS；
- 文件：引入方式、位置、文件合并、延迟加载；
- 硬件加速：GPU加速渲染
基于各环节优化：
- 减少http请求，合理设置 HTTP缓存
- 使用HTTP/2
- 持久连接，使用 keep-alive 或者 WebSocket
- 使用浏览器缓存
- 启用压缩
- CSS Sprites
- LazyLoad Images
- 样式文件放在顶部，脚本文件放在底部
- 减少 cookie 传输
- CDN 加速
CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据，即所谓网络访问第一跳。 - 反向代理
- 传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。
- 论坛网站，把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度，当这些动态内容有变化时，通过内部通 知机制通知反向代理缓存失效，反向代理会重新加载最新的动态内容再次缓存起来。
- 此外，反向代理也可以实现负载均衡的功能，而通过负载均衡构建的应用集群可以提高系统总体处理能力，进而改善网站高并发情况下的性能。
- 面向未来，考虑 service worker