当前位置: 首页 > 科技观察

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

时间:2023-03-20 01:12:21 科技观察

前言随着移动互联网的发展,用户对产品体验的要求越来越高。H5作为重要的业务载体,被广泛应用。如何控制H5的性能是一个重要的任务。因此,H5页面性能是一个非常核心的用户体验指标。研究表明,网页的加载速度将直接影响用户在该页面停留的时间长短。当用户发现页面有内容时,如果点击页面但页面没有立即响应,用户通常会认为页面加载有延迟;如果页面的某些元素在加载过程中出现较大的偏移,这对用户来说是非常糟糕的体验。因此,提高用户体验应该考虑页面渲染速度、响应速度和页面抖动。目前衡量页面指标的主流参数是GoogleLighthouse提出的几个指标,主要有FCP(FirstContentfulPaint)、LCP(LargestContentfulPaint)Paint)、CLS(CumulativeLayoutShift)、TTI(TimeToInteractive)、TBT(TotalBlockingTime)等。下面我们将从FCP、LCP、CLS、TTI、TBT这五个指标中一一介绍。FCPFCP(FirstContentfulPaint)指的是从页面开始加载到页面内容的任何部分被渲染到屏幕上的时间,也就是我们通常所说的首次内容绘制时间,是衡量的一个重要指标感知的加载速度。那么什么“内容”被认为是FCP,它包括文本、图像(包括背景图像)、元素或非白色的元素。LCPLCP(LargestContentfulPaint)根据页面首次开始加载的时间点报告可视区域中最大图像或文本块完成渲染的相对时间。最大内容绘制表示页面的主要内容已经加载完毕。它的检测是由ElementTimmingAPI支持的,它也使用了一种通过性能来监控事件的方法。LCP的计算包括哪些元素?除了通常的元素,