注意

内容非原创，仅做整理。仅供学习交流，不作商用，请勿转载！

介绍：前端性能优化

前端性能优化的定义

前端的定义

前端是直接面向用户的接口，负责与用户行为发生交互

常见的前端场景：PC、移动端、终端、Web、H5、Android、iOS

web performance

Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth? are buttons clickable? Are pop-ups quick to load and display, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.

网页性能是评判网页在加载与运行时，用户可感知的使用体验的客观指标。前端性能包含一些常见的指标：加载时间，帧率，网页可交互的时间，主观感受内容的加载时间。

The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.

网页响应用户操作的时间越长，会导致更多的用户放弃使用这个网站。因此，最大化减少加载和响应时间，让功能变得尽快可用与具有交互性。

web 生命周期的三个阶段

1. 加载阶段： 发出请求到渲染出完整页面的过程
2. 交互阶段：从页面加载完成到用户交互的整个过程
3. 关闭阶段：用户发出关闭指令后页面所做的一些清理工作

性能优化的定义

在Web页面的整个生命周期中，占用更小的资源，以更快的速度运行。

为什么要做性能优化

性能优化有助于让产品具有更好的使用体验，从而做到更高的业务转化率

性能是系统设计的标尺

1. 《高并发系统设计40问》中指出，高并发系统的设计目标为高可用、高性能、高扩展
2. 前端产品的设计要考虑性能、稳定性、易用性、可扩展性

性能优化有助于提高业务转化率

根据 Google 的统计数据，性能越好的网页，用户离开的比率会越小（跳失率）

性能优化的原则

1. 性能优化是问题导向的，不是无中生有
2. 要遵从二八定律，把握性能优化的关键指标
3. 要找到数据支撑
4. 持续、分阶段的优化

衡量：常用的前端性能优化指标

W3C performance

1. DNS解析耗时: domainLookupEnd - domainLookupStart
2. TCP连接耗时: connectEnd - connectStart
3. SSL安全连接耗时: connectEnd - secureConnectionStart
4. 网络请求耗时(TTFB): responseStart - requestStart
5. 数据传输耗时: responseEnd - responseStart
6. DOM解析耗时: domInteractive - responseEnd
7. 资源加载耗时: loadEventStart - domContentLoadedEventEnd
8. 首包时间: responseStart - domainLookupStart
9. 首次渲染时间 / 白屏时间: responseEnd - fetchStart
10. 首次可交互时间: domInteractive - fetchStart
11. DOM Ready时间: domContentLoadEventEnd - fetchStart
12. ⻚面完全加载时间: loadEventStart - fetchStart

lighthouse 指标

1. FCP - First Contentful Paint(首次内容渲染)
2. SI - Speed Index(速度指数)
3. LCP - Largest Contentful Paint(最大内容绘制)
4. TTI - Time to Interactive(可交互时间)
5. TBT - Total Blocking Time(总阻塞时间)
6. CLS - Cumulative Layout Shift(累积布局偏移)

常用性能检测工具

• chorome performance
• chorome lighthouse

方法：如何进行性能优化

性能的影响因素

• 用户的使用环境
• 站点自身的性能表现
  • 网络性能
  • 渲染性能

网络优化

• 减少关键资源数
• 减少关键资源的RTT（round-trip time）
  • 升级HTTP协议
  • 使用HTTP缓存
  • 优化接口请求
  • 使用数据缓存
  • DNS预解析
  • 使用CDN
  • 减少关键资源的个数和减少关键资源的大小搭配
• 减少关键资源的大小
  • 代码分割
  • 压缩
  • 静态资源服务器开启Gzip
  • 非首屏延迟加载

渲染优化

• 提高单帧的渲染速度
  • 合成线程 > 重绘 > 重排（影响从小到大）
    • 合理利用 css 合成动画
    • 避免强制同步布局和布局抖动
      • DOM 批处理
      • transform
  • 避免频繁的垃圾回收
  • 减少JS文件的执行时间
    • 长任务拆分
    • 优化代码执行逻辑
      • 合理的错误处理
      • 串行接口优化
      • 空间换时间
      • 按需加载
      • 图表渲染优化
    • 耗时的计算任务移除主线程

布局抖动

在一段JS代码中，反复执行布局操作，就是布局抖动