测量渲染时间的工具

Question

有没有一种工具可以测量页面元素的实际渲染时间？我指的不是资源下载时间，而是浏览器渲染某些内容所花费的实际时间。我知道这个时间会因客户端机器上的因素而有所变化，但是了解渲染引擎需要很长时间才能加载的内容仍然非常方便。考虑到Web应用程序现在变得非常依赖于客户端，我想这应该是一个有用的实用工具。您有什么想法吗？

- Noob

Answer 1

您可以查看YSlow。

编辑：在我的看法中，firebug 在网络面板中以蓝色和红色线显示呈现时间。

- Zed

---

我看了一下YSlow。它可以给你一个性能、加载时间和缓存统计的总体视图，但据我所见，它没有提供关于特定元素渲染所需时间的信息。我有遗漏什么吗？ - Noob

它只是建议删除一些DOM元素。我相信实际的渲染时间很大程度上取决于浏览器。 - Zed

Answer 2

我建议使用YSlow。

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

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

- Robert Cartaino

---

我该如何使用YSlow查看页面元素的性能时间？我试着找了一下，但没找到... - Noob

Answer 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 上进行了测试。

- Havenard

---

请注意，以下内容为程序相关内容，请勿进行解释性翻译。仅翻译文本内容：PS：除非您在使用mod_expire，否则它不会考虑加载外部.CSS文件或图像等链接资源所需的时间。也许您还想挂钩document.body.onload，但结果也会因您的连接速度和延迟而有所不同。 - Havenard

Answer 4

Firefox的Firebug已经在“Net”选项卡中集成了它。

需要修改Firefox（我使用的是版本12.0）配置，输入about:config在地址栏中搜索dom.send_after_paint_to_content

将dom.send_after_paint_to_content设置为true。

MozAfterPaint然后会在网络加载时间轴上以小绿色垂直线的形式呈现，除了蓝色（DOMContentLoaded）和红色（load）线。

- pl1

---

我在FF 19.0.2中设置了dom.send_after_paint_to_content = true，但是没有得到任何绿线....?! - nerdess