背景知识
随着业务的不断迭代，项目日渐壮大，为了给用户提供更优的体验，性能优化是前端开发避不开的话题。最近在学习整理前端性能优化方面的知识，看了一些文章，感觉文章多了比较零散，这里做个总结，可能有一些不全面的地方，欢迎大家进行补充～🎉
- 来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。
- Google Map 首页文件大小从100KB减小到70-80KB后，流量在第一周涨了10%，接下来的三周涨了25%。
- 亚马逊的数据表明：加载时间增加100毫秒，销量就下降1%。
性能优化的本质：在用户输入url到站点完整把整个页面展示出来的过程中，通过各种优化策略和方法，让页面加载更快；在用户使用过程中，让用户的操作响应更及时，有更好的用户体验。主要是从浏览器的加载和渲染两方面入手。
雅虎性能优化军规
雅虎军规是雅虎的开发人员在总结了网站的不合理部分后，提出的优化网站性能提高的一套方法规则，非常适合初学者，大家可以参考一下。
优化指标
这里只是抽出了一部分进行分享，更多更详细的见：https://segmentfault.com/a/1190000041753539
以用户为中心
- First Paint 首次绘制（FP）
这个指标用于记录页面第一次绘制像素的时间，如显示页面背景色。FP不包含默认背景绘制，但包含非默认的背景绘制。 - First contentful paint 首次内容绘制 (FCP)
LCP是指页面开始加载到最大文本块内容或图片显示在页面中的时间。如果 FP 及 FCP 两指标在 2 秒内完成的话我们的页面就算体验优秀。 - Largest contentful paint 最大内容绘制 (LCP)
用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录。官方推荐的时间区间，在 2.5 秒内表示体验优秀 - First input delay 首次输入延迟 (FID)
首次输入延迟，FID（First Input Delay），记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。 - Time to Interactive 可交互时间 (TTI)
首次可交互时间，TTI（Time to Interactive）。这个指标计算过程略微复杂，它需要满足以下几个条件：- 从 FCP 指标后开始计算
- 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
- 往前回溯至 5 秒前的最后一个长任务结束的时间
对于用户交互（比如点击事件），推荐的响应时间是 100ms 以内。那么为了达成这个目标，推荐在空闲时间里执行任务不超过 50ms（ W3C 也有这样的标准规定），这样能在用户无感知的情况下响应用户的交互，否则就会造成延迟感。
- Total blocking time 总阻塞时间 (TBT)
阻塞总时间，TBT（Total Blocking Time），记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和。 - Cumulative layout shift 累积布局偏移 (CLS)
累计位移偏移，CLS（Cumulative Layout Shift），记录了页面上非预期的位移波动。页面渲染过程中突然插入一张巨大的图片或者说点击了某个按钮突然动态插入了一块内容等等相当影响用户体验的网站。这个指标就是为这种情况而生的，计算方式为：位移影响的面积 * 位移距离。
三大核心工具
Google 在2020年五月提出了网站用户体验的三大核心指标：
![[图片]](https://i-blog.csdnimg.cn/blog_migrate/1e5772c773e1ecb88f07ea3e5e3f7e7b.png)
Largest Contentful Paint (LCP)
LCP代表了页面的速度指标，虽然还存在其他的一些体现速度的指标，但LCP能体现的东西更多一些。一是指标实时更新，数据更精确，二是代表着页面最大元素的渲染时间，通常来说页面中最大元素的快速载入能让用户感觉性能还挺好。
最大元素：
- <img> 标签
- <image> 在svg中的image标签
- <video> video标签
- CSS background url()加载的图片
- 包含内联或文本的块级元素
![[图片]](https://i-blog.csdnimg.cn/blog_migrate/7b5b2b6e7d2713afc4e8cdf4d946cba9.png)
最低0.47元/天 解锁文章
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
