我该如何监测浏览器的渲染时间？

Question

我在一个使用Tomcat的Web前端的内部企业系统上工作。

1. 如何监控浏览器（IE6）中特定页面的呈现时间？
2. 我想能够将结果记录在日志文件中（单独的日志文件或Tomcat访问日志）。

理想情况下，我需要监视访问页面的客户端的呈现。

- adpd

---

你知道"Fiddler"吗？（https://www.fiddler2.com/fiddler2/version.asp）？ - XpiritO

Fiddler 可以测量请求执行和传输到客户端所需的时间，但如果网站使用了大量 JavaScript 或者很大，那么在浏览器处理 DOM 和 JavaScript 时会有额外的延迟。这对于 IE6 尤其正确。 - driis

此外，Fiddler 搞乱了我的系统。我不会在我的机器上安装它。 - Nathan Osman

Answer 1

导航定时 API 在所有现代浏览器中都可用。

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

- Brian Low

Answer 2

如果浏览器启用了JavaScript，您可以编写内联脚本并将其作为HTML的第一部分发送。该脚本将执行两个操作：

1. 记录JS变量中的当前系统时间（如果幸运，时间可能大致对应于页面渲染开始时间）。
2. 将JS函数附加到页面的onLoad事件上。然后，此函数会再次查询当前系统时间，从步骤1中的开始时间中减去，并将其与页面位置（或服务器动态插入内联脚本的某些唯一ID）一起发送到服务器。

<script language="JavaScript">
var renderStart = new Date().getTime();
window.onload=function() { 
   var elapsed = new Date().getTime()-renderStart;
   // send the info to the server 
   alert('Rendered in ' + elapsed + 'ms'); 
} 

</script>

... usual HTML starts here ...

您需要确保页面在代码后不会覆盖onload，而是将其添加到事件处理程序列表中。

- Vlad Gudim

---

+1 - 这听起来像是我目前所考虑的事情。很高兴得到这种思路的确认。有人认为这是错误的方法吗？ - adpd

现在这个方法已经过时了。虽然在2010年这是最好的选择，但是在2012年大多数浏览器支持W3C性能计时规范，那是一个更好的获取这些信息的方式。 - Thaeli

这个不起作用。它测量的是加载所有内容所需的时间，但不包括渲染时间。尝试生成一个大的SVG。当SVG图片的大小已知时，onload事件会被触发，但用户可能需要一些时间才能看到图片，直到它被渲染出来。 - Josef Kufner

Answer 3

在Firefox中，您可以使用Firebug来监视加载时间。通过YSlow插件，您甚至可以获得如何提高性能的建议。

- Zoltan

Answer 4

就非侵入式技术而言，Hammerhead 可以测量完整的加载时间（包括 JavaScript 执行），但仅限于 Firefox。

当可以全局添加 JavaScript 片段来测量每个页面加载操作的开始和结束时，我看到了可用的结果。

- Tomislav Nakic-Alfirevic

Answer 5

看看Selenium - 它们提供了一个远程控制器，可以自动启动不同的浏览器（例如IE6），加载页面，测试页面上的特定内容。最后生成报告，还显示渲染时间。

- pitpod

Answer 6

由于其他人发布了使用其他浏览器的答案，我想我也会这样做。Chrome有一个非常详细的分析系统，可以分解页面的渲染时间，并显示沿途每个步骤所花费的时间。

至于IE，您可能需要考虑编写插件。市场上似乎很少有这样的工具。也许您可以出售它。

- Nathan Osman

---

我同意市场上针对IE的“工具太少”的说法。编写一个插件可能不是个坏主意。我可以看看这个。感谢您对Chrome的建议，但客户机器目前必须运行IE6，因为这是公司IT政策。升级时，肯定会使用IE7或IE8。如果我有其他浏览器的奢侈品就好了... - adpd