聊聊前端性能指标那些事儿

作者：京东科技 郝梁

前言：作为 C 端前端研发，除了攻克业务难点以外，也要有更深层的自我目标，那就是性能优化。这事儿说大不大，说小也不小，但难度绝对不一般，所涉及的范围优化点深入工程每个细胞。做好前端性能优化绝非简单之事！文章主要内容介绍前端性能考核指标及优化方案。

一、前端性能指标有哪些？

根据 chrome Lighthouse 最新规则，前端性能指标考量主要有 FCP（First Contenful Paint）、SI（Speed Index）、LCP（Largest Contentful Paint）、TBT（Total Blocking Time）、CLS（Cumulative Layout Shift） ，占比分别如下。

二、什么是 FCP ？

FCP： First Contentful Paint 首次内容绘制是指测量页面从开始加载到页面内容（文本、图片、背景图、svg 元素或非白色 canvas 元素）的任何部分在屏幕上完成渲染的时间，是测量加载速度感知的重要指标之一。

示例：

从上图可以观察到，页面加载开始到页面渲染完成的时间轴中，FCP 发生在第二帧，首批文本和图片在屏幕上已经渲染完成。

虽然页面一部分内容已完成渲染，但这并非页面所有内容全部完成渲染；这就是首次内容绘制（FCP）与最大内容绘制（LCP）最重要的区别。

FCP 性能值：首次内容绘制完成渲染时间应控制在 1.8s 以内。

我们可以从以下方向点优化 FCP ：

• 消除阻塞渲染的资源：

◦