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是一个布尔参数，您将在脚本完成后添加。

2）Chrome有一个很好的开发人员控制台，具有时间线功能。基本上，打开Chrome浏览器并按命令+ Shift + C（控制+ Shift + C for windows），然后单击时间轴按钮。然后，单击控制台底部的小点，它应该变为红色。刷新页面，时间线将开始收集脚本的各种计时数据。绘画活动以绿色显示。不幸的是，这是第三方解决方案。

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

Answer 2

对于初学者，我一定会熟悉Firebug中的“Net panel”：

http://getfirebug.com/network

据我所知，Chrome有类似的工具：点击“F12”（或使用“扳手”图标）：

https://developers.google.com/chrome-developer-tools/

Answer 3

您可能希望查看“DOMContentLoaded”事件，这是jQuery绑定的事件，以提供它的.ready（）方法。基本的想法是你要使用Date.getTime（）来记录毫秒值，第一个应该是文档的最后一行（对于html下载的标记）。第二个要在onload，DOMContentLoaded，loaded和其他DOM就绪状态事件之后调用。

快速示例（html输出的结尾）：

<script type="text/javascript">
    window.downloadComplete = new Date().getTime();
    document.onload = function() { window.domParseComplete = new Date().getTime(); }
    window.onload = function { window.renderComplete = new Date().getTime(); }
    window.paintTime = window.renderComplete - window.downloadComplete;
</script>

在此示例中，window.downloadComplete将是DOM完成下载时的毫秒数，window.domParseComplete是解析DOM时的毫秒数，window.renderComplete是窗口报告渲染完成时的毫秒数。 window.paintTime只是从这些毫秒时间计算出的毫秒数。

有没有明确的方法来衡量“绘画时间”的表现？

3 个答案: