认识达内从这里开始

性能优化一直以来都是需要软件开发程序员需要长期关注的一个问题，而本文我们就通过案例分析来简单了解一下，web前端性能优化指标分享。

FP(FirstPaint)

次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。

FCP(FirstContentfulPaint)

次有内容渲染的时间点。在用户访问Web网页的过程中，FCP时间点之前，用户看到的都是没有任何实际内容的屏幕。FCP反映当前Web页面的网络加载性能情况、页面DOM结构复杂度情况、inlinescript的执行效率的情况。当所有的阶段性能做的非常好的情况下，次出现内容的时间就会越短，用户等待的时间就会越短，流失的概率就会降低

FMP(FirstMeaningfulPaint)

次绘制有意义内容的时间点。FMP通常被认为是用户获取到了页面主要信息的时刻，也就是说此时用户的需求是得到了满足的，所以产品通常也会关注FMP指标。

前端业界现在比较认可的一个计算FMP的方式就是：页面在加载和渲染过程中大布局变动之后的那个绘制时间即为当前页面的FMP。FMP代码实现原理：

认为「DOM结构变化的时间点」与之对应「渲染的时间点」近似相同。所以FMP的时间点为「DOM结构变化剧烈的时间点」。「DOM结构变化的时间点」可以利用MutationObserverAPI来获得。

通过MutationObserver监听每一次页面整体的DOM变化，触发MutationObserver的回调。

在回调计算出当前DOM树的分数，分数变化剧烈的时刻，即为FMP的时间点。

SI(SpeedIndex)

衡量页面可视区域加载速度，帮助检测页面的加载体验差异。A和B的次内容出现和完全加载时间是一样的，但是从用户角度A的体验明显更好。

TTI(TimetoInteractive)

测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。

FID(FirstInputDelay)

源自Eventtiming标准，深入了解由用户交互触发的事件的延迟。通常情况下，InputDelay是因为浏览器主线程在忙于执行其他操作，无暇处理用户的交互操作。

FID会测量从用户一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应，实际能够开始处理事件、处理程序所经过的时间。

FID反映用户对页面交互性和响应性的一印象，良好的一印象有助于用户建立对整个应用的良好印象。

页面加载阶段，资源的处理任务重，也容易产生输入延迟。因此关注FID指标对于提升页面的可交互性有很大收益。

FID和页面加载完成后的InputDelay具有不同的解决方案。针对FID，我们一般建议通过CodeSplitting等方式减少页面加载阶段JS的加载、解析和执行时间。而页面加载完成后的InputDelay，通常是由于开发人员代码编写不当、引起JS执行时间过长而产生的。

三个全新的性能指标，它们填补了用户体验故事中的空白。分别是：

LCP(LargestContentfulPaint)

大的内容在可视区域内变得可见的时间点。大的元素，例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的有用的元素。

LCP容易理解，给出与FMP相似的结果，容易计算和上报。

TBT(TotalBlockingTime)

量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。

长任务：如果一个任务在主线程上运行超过50毫秒，那么它就是长任务。超过50ms后的任务耗时，都算作任务的阻塞时间。

一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和。

TTI有时可能会误导用户，但当与TBT结合使用时，你就会更清楚地了解页面对用户输入的响应程度。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。