Question

我使用Tomcat处理具有Web前端的内部企业系统。

如何在浏览器（IE6）中监控特定页面的渲染时间？
我希望能够将结果记录在日志文件中（单独的日志文件或Tomcat访问日志）。

编辑：理想情况下，我需要监控访问页面的客户端上的呈现。

Answer 1

Navigation Timing API在现代浏览器（IE9 +）中可用，但Safari除外：

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);
}

Answer 2

如果浏览器启用了JavaScript，您可以做的一件事就是编写内联脚本并在HTML中首先发送它。该脚本将做两件事：

在JS变量中记录当前系统时间（如果幸运的话，时间大致对应于页面渲染开始时间）。
将JS功能附加到页面onLoad事件。然后，此函数将再次查询当前系统时间，从步骤1中减去开始时间，并将其与页面位置一起发送到服务器（或者您可以在服务器上动态插入内联脚本的某个唯一ID）。 LI>
```
<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，而是添加到事件处理程序列表中。

Answer 3

就非侵入性技术而言，Hammerhead测量完整的加载时间（包括JavaScript执行），尽管仅在Firefox中。

我可以在全局添加JavaScript代码段来衡量每个页面加载操作的开始和结束时看到可用的结果。

Answer 4

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

Answer 5

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

对于IE，您可能需要考虑编写插件。市场上似乎没有这样的工具。也许你可以卖掉它。

Answer 6

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

如何在浏览器中监控渲染时间？

6 个答案: