有没有一种确定的方法来衡量“绘制时间”表现？ [英] Is there a definitive way to measure "time to paint" for performance?

问题描述

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

I'm testing various performance tweaks for a large website, and I need to quantify how long it takes from initial load to the document elements appearing (i.e. time to paint). Is there a good way to do this using Chrome's dev profiler?

为了说明问题，我需要知道从加载到着色页面的总时间。 $ b

To clarify, I need to know the total time from load to painted page.

推荐答案

您可以执行以下两项操作之一：
1）使用Dan Mayor的方法。您可以在绘制脚本前后简单地使用新的Date（）。getTime ，并减去它们以找出脚本完成的时间。但是，如果整个代码滞后，这可能会滞后。这不一定是最准确的方法，但它可以完成工作。 （但是，您可以创建一个单独的函数来计算独立于其他脚本的时间，如下所示：）

You could do one of two things: 1) Use Dan Mayor's method. You can simply use new Date().getTime before and after the painting script and subtract them in order to find out how long the script took to complete. However, this may be subject to lag if the entire code lags. It's not necessarily the most accurate way, but it gets the job done. (However, you could create a separate function that calculates the time independently of the other script. See below:)

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

其中 done 是脚本完成后添加的布尔参数。

Where done is a boolean parameter you would add after the script is complete.

2）Chrome拥有一个具有时间线功能的开发人员控制台。基本上，打开你的Chrome浏览器并点击Command + Shift + C（控制+ shift + C for windows），然后点击时间轴按钮。然后，点击控制台底部的小圆点，它会变成红色。刷新页面，时间轴将开始收集脚本的各种时间数据。绘画事件以绿色显示。不幸的是，这是第三方的解决方案。

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.

这篇关于有没有一种确定的方法来衡量“绘制时间”表现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！