Question

是否有工具来测量页面上元素的实际渲染时间？我不是指资源的下载时间，而是浏览器渲染内容的实际时间。我知道这个时间会因客户端计算机上的因素而异，但在了解渲染引擎需要一段时间加载时仍然非常方便。我认为这应该是一个有用的实用程序，因为Web应用程序现在变得非常沉重。有什么想法吗？

Answer 1

您可以查看YSlow。

编辑：在我看来，firebug在网络面板中显示了蓝色和红色线条的渲染时间。

Answer 2

我会建议YSlow。

它不仅可以测量页面中元素的性能时间，还可以分析页面设计，以建议如何改进性能。 这是他们在Stack Overflow开发中使用的工具之一。

Yahoo! YSlow

YSlow分析网页并建议提高绩效的方法基于一套高规则性能网页。 YSlow是一个与Firefox集成的Firefox附加组件 Firebug Web开发工具。 YSlow的基于三个中的一个来评分网页预定义的规则集或用户定义的规则集。它提供了建议提高页面性能，总结了页面的组件，显示有关页面的统计信息，并提供性能工具分析，包括Smush.it™和的JSLint。

Answer 3

Firebug for Firefox将其整合到“Net”-Tab。

中

需要Firefox（我在版本12.0中完成配置）配置已修改，在地址栏中输入about:config，然后搜索dom.send_after_paint_to_content

将dom.send_after_paint_to_content设为true。

然后，除了蓝色（MozAfterPaint）和红色（加载）行之外，

DOMContentLoaded在网络加载时间轴中被绘制为绿色的小垂直线。

Answer 4

我一直在使用这个脚本来分析某些页面的渲染时间：

<script language="JavaScript">
<?

    $output = str_replace('=', 'A', base64_encode(file_get_contents('data.txt')));

    echo "\tCode = \"" . substr($output, 0, 512) . "\"";
    $size = strlen($output);
    for ($i = 512; $i < $size; $i += 512)
        echo "\n\t     + \"" . substr($output, $i, 512) . "\"";
    echo ";\n";

?>
    Data = "";
    Dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

    j = Code.length -3;
    for (i = 0; i < j; i += 4) {
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i    )) << 2) | (Dict.indexOf(Code.charAt(i + 1)) >> 4)) & 0xff);
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 1)) << 4) | (Dict.indexOf(Code.charAt(i + 2)) >> 2)) & 0xff);
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 2)) << 6) | (Dict.indexOf(Code.charAt(i + 3))     )) & 0xff);
    }

    time_start = (new Date).valueOf()/1000;
    document.write(Data);
    time_elapsed = (new Date).valueOf()/1000 - time_start;

    alert(time_elapsed);

</script>

部分PHP，部分JavaScript。 data.txt 是包含要分析的HTML的文件。在IE和FF上测试。

测量渲染时间的工具

4 个答案: