测量渲染时间的工具答案

【问题标题】：Tool to measure Render time测量渲染时间的工具
【发布时间】：2010-11-22 08:19:58
【问题描述】：

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

【问题讨论】：

标签： html performance browser rendering

【解决方案1】：

Firebug for Firefox 已将其集成到“Net”-Tab 中。

需要火狐（我是用12.0版做的）配置修改，地址栏输入about:config然后搜索dom.send_after_paint_to_content

将dom.send_after_paint_to_content 设置为真。

除了蓝色 (DOMContentLoaded) 和红色（加载）线之外，MozAfterPaint 然后在网络加载时间线中绘制为绿色的小垂直线。

【讨论】：

我在 FF 19.0.2 中设置了 dom.send_after_paint_to_content = true 但没有得到任何绿线......？！

【解决方案2】：

您可以查看YSlow。

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

【讨论】：

我查看了 YSlow。它为您提供了性能、加载时间和缓存统计信息的整体视图，但就我所见而言，没有关于特定元素渲染所需时间的信息。我错过了什么吗？
它只对一些要删除的 DOM 元素提出建议。我相信实际的渲染时间很大程度上取决于浏览器。

【解决方案3】：

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

<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 上测试。

【讨论】：

PS：它不会考虑加载链接资源所需的时间，例如外部 .CSS 文件或图像，除非您对它们使用 mod_expire。也许您也想挂接 document.body.onload，但结果也会因您的连接速度和延迟而异。

【解决方案4】：

我建议使用 YSlow。

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

Yahoo! YSlow

YSlow 分析网页并提出建议提高他们绩效的方法基于一套高规则性能网页。 YSlow 是一个 Firefox 插件与 Firebug 网络开发工具。慢根据三个之一对网页进行评分预定义的规则集或用户定义的规则集。它提供建议提高页面的性能，总结页面的组件，显示有关页面的统计信息，并提供性能工具分析，包括 Smush.it™ 和 JSLint。

【讨论】：

如何使用 YSlow 查看页面上元素的性能时间？我试着找了，没找到……