html - 有没有确定的方法来衡量 "time to paint"的性能？

Question

我正在为一个大型网站测试各种性能调整，我需要量化从初始加载到出现文档元素所需的时间(即绘制时间)。是否有使用 Chrome 的开发分析器执行此操作的好方法？

为了澄清，我需要知道从加载到绘制页面的总时间。

Answer 1

你可以做以下两件事之一:1) 使用 Dan Mayor 的方法。您可以简单地在绘画脚本之前和之后使用 new Date().getTime 并减去它们，以便找出脚本完成所花费的时间。但是，如果整个代码滞后，这可能会滞后。它不一定是最准确的方法，但它可以完成工作。 (但是，您可以创建一个单独的函数来独立于其他脚本计算时间。见下文:)

function findTime(done){
if (done==false){var time1 = new Date.getTime();}
if (done==true) {var time2 = new Date.getTime(); window.alert(time2-time1);}
}

done 是您将在脚本完成后添加的 bool 参数。

2) Chrome 有一个不错的开发人员控制台，具有时间轴功能。基本上，打开您的 Chrome 浏览器并按 command+Shift+C(对于 Windows 为 control+shift+C)，然后单击时间轴按钮。然后，单击控制台底部的小点，它应该变成红色。刷新页面，时间线将开始为您的脚本收集各种时间数据。绘画事件以绿色显示。不幸的是，这是第三方解决方案。

最终，由于延迟量、互联网连接速度、处理器速度等不同，无法直接测量这个时间。但是，这两种方法非常接近实际答案。您可能想在不同的浏览器和计算机上测试脚本。