4

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

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

4

3 回答 3

2

您可以做以下两件事之一：1）使用丹市长的方法。您可以简单地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 has a nice developer's console with a timeline capability. Basically, open your Chrome browser and hit command+Shift+C (control+shift+C for windows), and click the timeline button. Then, click the little dot at the bottom of the console, and it should turn red. Refresh the page, and the timeline will start collecting all kinds of timing data for your scripts. Painting events are shown in green. Unfortunately, this is a third party solution.

In the end, there is no way to directly measure this time, due to different amounts of lag, different internet connectivity speeds, processor speeds, etc. However, these 2 methods come pretty close to the actual answer. You may want to test the scripts on different browsers and computers.

于 2012-12-27T19:18:26.990 回答
0

对于初学者，我肯定会熟悉 Firebug 中的“网络面板”：

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

于 2012-12-27T02:58:06.637 回答
0

您可能想查看“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 只是从这些毫秒时间计算的毫秒数。

于 2012-12-27T03:08:29.647 回答