前端性能优化知识树

我的前端性能优化知识体系

谷歌性能优化https://web.dev/fast/

Web 性能 | MDN (mozilla.org)

一、网站用户体验

以用户为中心的性能模型（RAIL模型）

• First Paint 首次绘制（FP）：记录页面第一次绘制像素的时间。

• First contentful paint 首次内容绘制 (FCP)：记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间

• Largest contentful paint 最大内容绘制 (LCP)：记录视窗内最大的元素绘制的时间（随页面渲染变化）

• First input delay 首次输入延迟 (FID)：记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。

• Time to Interactive 可交互时间 (TTI)：

  1. 从 FCP 指标后开始计算
  2. 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
  3. 往前回溯至 5 秒前的最后一个长任务结束的时间

• Total blocking time 总阻塞时间 (TBT)：记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和

• Cumulative layout shift 累积布局偏移 (CLS)：记录了页面上非预期的位移波动

三大核心指标

• LCP：页面的速度指标

• FID：页面的交互体验指标

• CLS：页面的稳定指标

二、页面渲染过程--优化

用户输入--URL解析--检查浏览器缓存--DNS解析--tcp/ip连接--http请求--服务器请求发送http报文--浏览器渲染--断开连接

1. 浏览器缓存检查

• 开启浏览器缓存
• 第三方库公共模块抽取

2. DNS解析

• DNS预解析
• DNS负载均衡

3. http请求

• 开启HTTP2

三、 浏览器渲染--优化

DOM树--CSSOM--布局树--渲染（创建图层--样式重计算--重排&回流--重绘--图层上传GPU--图层重组）

1. 创建图层

• transform: translateZ(0)类似的组成复合图层

2. 回流和重绘

• 静态资源使用 CDN
• 防止脚本阻塞（CSS放在头部）
• 图片优化
• 压缩文件
• 减少重绘重排
• 代码分割
• Tree Shaking
• 骨架屏
• 服务端渲染
• 伪服务端渲染

三、MDN文档描述优化

• CSS与Javascript动画性能
• dns-prefetch
• 懒加载
• 优化启动性能
• 关键渲染路径CRP

四、web.dv描述优化

• 设置性能预算
• 优化图片
• 延迟加载图片和视频
• 优化 JavaScript
• 优化资源交付
• 优化 CSS
• 优化第三方资源
• 优化网络字体
• 针对网络质量优化
• 对性能进行实测
• 建立性能文化

五、性能监测工具

• Lighthouse

https://web.dev/use-lighthouse-for-performance-budgets/
https://www.cnblogs.com/wenxuehai/p/14236426.html

六、待细读（*重点）

[^_^]: 
* 谷歌性能优化https://web.dev/fast/
* 谷歌用户体验https://developers.google.cn/web/fundamentals/design-and-ux/ux-basics?hl=zh-cn
* [浏览器工作原理与实践 (poetries.top)](https://blog.poetries.top/browser-working-principle/)
* https://developer.mozilla.org/zh-CN/docs/Web/Performance
[以 Webkit 为例的浏览器渲染过程](https://zhuanlan.zhihu.com/p/271859197)
[深入浅出浏览器渲染原理 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/53913989)
[深度剖析浏览器渲染性能原理，你到底知道多少？ - 简书 (jianshu.com)](https://www.jianshu.com/p/a32b890c29b1)