京东PLUS前端H5性能优化实践

​前言

随着移动互联网的发展，用户对产品的使用体验要求越来越高。H5 作为业务的重要载体，应用非常广泛，如何把控好 H5 的性能是一门重要的工作。因此 H5 页面性能是一个非常核心的用户体验指标。

研究表明一个网页加载的快慢会直接影响用户在这个页面逗留的时长，用户在发现页面有内容呈现的时候，如果在页面进行了点击但是页面没有立即响应，用户通常会认为页面加载出现了延迟；如果页面在加载过程中某些元素发生了大幅度的偏移，这对于用户来说体验是相当糟糕的。

因此提高用户体验应从页面的渲染速度、响应能力及页面的抖动情况考虑，目前比较主流的衡量页面指标的参数是谷歌 lighthouse 提出的几个指标， 主要包括 FCP（First Contentful Paint）, LCP（Largest Contentful Paint）, CLS（Cumulative Layout Shift）, TTI（Time To Interactive）, TBT（Total Blocking Time）等。下面我们将从FCP、LCP、CLS、TTI、TBT五个指标来进行一一介绍。

FCP

FCP（First Contentful Paint）是指页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间，也就是我们通常所说的首次内容绘制时间，它是测量感知加载速度的一个重要指标。那么什么“内容”才算FCP的呢，其中包含了文本、图像（包括背景图像）、