作者：京东科技 郝梁
(资料图)
前言：作为 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 ：
•消除阻塞渲染的资源：◦<script> 标签：在 标签内的，并且没有 defer/async 属性◦
标签：没有 disabled 属性，有 media="all" 属性被认为是渲染阻塞•缩小 CSS 体积：写法，压缩 CSS•移除未使用的 CSS•预连接到所需的来源：
•减少服务器响应时间（TTFB）•避免多个页面重定向：浏览器请求已定向的资源时，服务器会返回一个 HTTP 响应，然后浏览器必须在新位置发出另一个 HTTP 请求来检索资源。这种额外的网络传输会使资源加载延迟数百毫秒。•预加载关键请求：
•避免巨大的网络负载：网络负载的中位数在 1700 到 1900 KiB 之间。 Lighthouse 会标记总网络请求超过 5000 KiB 的页面。将总字节大小保持在 1600 KiB 以下。◦缩小和压缩网络有效负载：缩小（代码），数据压缩（Gzip，Brotli）◦图片使用 Webp◦JPEG 图片压缩级别设置为 85•对静态资源使用高效的缓存策略：可缓存资源◦字体、图像、媒体文件、脚本或样式表◦资源具有 200 、 203 、 206 HTTP 状态码◦资源没有明确的无缓存策略•避免 DOM 过大：◦会造成网络效率和负载性能差◦页面交互时，会导致重新计算节点的位置和样式，降低渲染速度◦可能会不知不觉存储大量节点的引用，造成内存过大•最小化关键请求深度：链的长度越长，下载量越大，对页面加载性能的影响就越大◦减少关键资源数量（删除，推迟下载，标记 async 等）◦优化关键字节数减少下载时间◦优化剩余关键资源的加载顺序，尽早下载所有关键资源，缩短关键路径长度•确保文本在网页字体加载期间保持可见：预加载网络字体•保持较低的请求数和较小的传输大小： CSS 和 JavaScript ，图片，字体，文件，媒体三、什么是 Speed Index ？
SI：Speed Index 衡量页面加载期间内容以视觉方式显示的速度。 Lighthouse 首先捕获浏览器中页面加载的视频，并计算帧之间的视觉速度。通俗的讲，就是网页从有东西到完全显示内容的可见填充速度。
Speed Index 指标值：
我们可以从以下方向点优化 Speed Index 的方法：
•减少主线程工作•减少 JavaScript 执行时间•确保文本在 webfont 加载期间保持可见四、什么是 LCP ？（重点）
LCP： Largest Contentful Paint 最大（最有意义）内容绘制，是指根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或者文本块完成渲染的相对时间。
LCP 指标值：
•LCP <= 2.5s 合格•2.5s < LCP <= 4s 需要优化•LCP > 4s 劣质1. LCP 考量的元素有哪些？
主要考量以下几种相关元素：
•
![]()
元素•内嵌在
