前端性能

性能衡量指标

指标:

  • 白屏时间
  • 首屏时间
  • 用户可交互时间
  • 完全加载时间
  • 首字节时间
  • DNS 解析时间
  • TCP 连接时间
  • HTTP 请求时间
  • HTTP 响应时间

维度:

  • 运营商
  • 网络
  • URL

性能监控

如何监控

性能优化

优化点:

  • 高频事件消抖、节流。使用_.debounce()_. throttle(),控制高频事件的操作,如:scrollonChange
    • _.debounce()的多次连续的调用,最终实际上只会调用一次;
    • _. throttle()将频繁调用的函数限定在一个给定的调用频率内。
  • JavaScritp很快,但是DOM很慢,减少修改DOM。
    • DOM的渲染需要计算DOM+CSSOM,每次DOM和CSSOM的每次修改都会触发重绘;
      • 渲染过程:JavaScript -> Style -> Layoout -> Paint -> Composite
    • 避免 position: fixed;布局,Z轴图层堆叠关系会改变,引起重绘;
    • 图层隔离:将那些会变动的元素提升至单独的图层,比如:动画、渐变;
    • 降低图层复杂度;
    • 避免线程阻塞;
    • 优化CSS;
    • 文件:引入方式、位置、文件合并、延迟加载;
    • 硬件加速:GPU加速渲染

基于各环节优化:
path

  • 减少http请求,合理设置 HTTP缓存
  • 使用HTTP/2
  • 持久连接,使用 keep-alive 或者 WebSocket
  • 使用浏览器缓存
  • 启用压缩
  • CSS Sprites
  • LazyLoad Images
  • 样式文件放在顶部,脚本文件放在底部
  • 减少 cookie 传输
  • CDN 加速
    • CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据,即所谓网络访问第一跳。
  • 反向代理
    • 传统代理服务器位于浏览器一侧,代理浏览器将http请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器接收http请求。
    • 论坛网站,把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度,当这些动态内容有变化时,通过内部通知机制通知反向代理缓存失效,反向代理会重新加载最新的动态内容再次缓存起来。
    • 此外,反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。
  • 面向未来,考虑 service worker

相关文章