The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

网站在其自身的脚本中不使用 console.time()

为什么说此审查非常重要

如果您使用 console.time() 测量页面的性能,请考虑改用 User Timing API。 其优势包括:

  • 高分辨率时间戳。
  • 可导出的计时数据。
  • 与 Chrome DevTools Timeline 相集成。在 Timeline 录制期间调用 User Timing 函数 performance.measure() 时,DevTools 自动将此测量结果添加到 Timeline 的结果中,如以下屏幕截图中的 my custom measurement 标签中所示。

Chrome DevTools Timeline 中的 User Timing 测量结果

如何通过此审查

在您的报告中,Lighthouse 列出了其在 URLs 下找到的 console.time() 的每个实例。 将每个调用替换为 performance.mark()。如果您要测量在两个标记之间经过的时间,则使用 performance.measure()

请参阅 User Timing API:了解您的网络应用以了解如何使用此 API。

如何实现此审查

本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。

Lighthouse 报告它从与页面位于同一主机的脚本中发现的 console.time() 的每个实例。 来自其他主机的脚本被排除在外,因为 Lighthouse 假定您不能控制这些脚本。因此,您的页面上可能有使用 console.time() 的其他脚本,但这些脚本不会显示在您的 Lighthouse 报告中。