通过Web API导航API和性能时间表API计算前端性能指标

问题描述

为了计算第一个内容丰富的绘画,我在浏览器控制台中使用了以下命令。

window.performance.getEntriesByType('paint')->从那开始,我获取了第一个内容丰富的绘画的开始时间,即开始时间:710.1449999972829 ms。

Reference

但是,如果我通过lighthouse(来自chrome dev工具)审核同一页,则lighthouse计算出的第一个令人满意的油漆就是'1.5 s'

我试图理解为什么两个数据之间会有很大的差异。尝试通过灯塔运行审计两次,但数据仍然很难与Web api数据匹配。

谁能向我解释为何存在巨大差异。我应该继续处理来自Web api的数据还是应该将灯塔数据视为有效数据?

解决方法

谢谢您提出一个很好的问题,我今天从中学到了一些东西。

看来,即使在桌面视图上,CPU也有一些节流,据我所知,这种情况并非如此。

I found this article that explains the current throttling policy.

关键部分如下:

从Chrome 80开始,“审核”面板将简化限制配置:

  1. 模拟节流保留为默认设置。这与PageSpeed Insights的设置和Lighthouse CLI的默认设置匹配,因此可以提供跨工具的一致性。
  2. 不取消限制,因为这会导致评分不准确和度量标准结果产生误导。
  3. 在“审核”面板设置中,您可以取消选中“ 模拟限制”复选框以使用“ 已应用限制”。 应用节流选项可用于“查看跟踪”按钮的用户。 在应用限制条件下,跟踪与度量标准值匹配,而在“模拟”下,当前不匹配。

第3点是主要部分。基本上,节流仍然适用于台式机上的CPU。还请注意,他们说“暂时”,因此很明显,他们正考虑在将来删除它们。

这实际上是一个真正的好主意,大​​多数开发人员正在运行功能强大的硬件,大多数消费者在运行配备i3处理器(或同等产品……或更差的价格!)的现成笔记本电脑时价格便宜。>

由于Google花费大量时间来完善Lighthouse,因此我将节制为 ON ,并使用其结果,因为它们将更能指示最终用户可能看到的内容。

关闭模拟节流

如果您希望跟踪结果(或控制台性能API结果)匹配,请取消选中页面顶部的“模拟限制”。