logo标签列表

有没有一种确定的方法来衡量性能的“绘制时间”?

htmlperformance
4

我正在测试大型网站的各种性能优化措施，并需要衡量从初始加载到文档元素出现的时间（即绘制时间）。是否有一种使用Chrome开发者工具分析器来完成这个任务的好方法？

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

加载和绘制时间。我会在问题中更加明确。 - bjork24
这不就是DOM准备完成和onload触发的区别吗？ - Ja͢ck
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拥有一个不错的开发者控制台，具备时间轴功能。基本上，打开Chrome浏览器并按下command+Shift+C（Windows系统为Control+Shift+C），然后单击时间轴按钮。接着，点击控制台底部的小圆点，它会变成红色。刷新页面，时间轴将开始收集您的脚本的各种计时数据。绘画事件显示为绿色。不幸的是，这是第三方解决方案。

最终，由于不同数量的延迟、不同的互联网连接速度、处理器速度等原因，没有直接测量此时间的方法。然而，这两种方法很接近实际答案。您可能需要在不同的浏览器和计算机上测试脚本。

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只是从这些毫秒时间计算出来的毫秒数。
编辑了我的答案，包括我建议的更直接的示例。 - user1931103
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接