前端性能优化

性能衡量指标

指标：

• 白屏时间
• 首屏时间
• 用户可交互时间
• 完全加载时间
• 首字节时间
• 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