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

Question

我在一个内部企业系统上工作,该系统具有使用Tomcat的Web前端.

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

编辑:理想情况下,我需要监控访问页面的客户端上的呈现.

Answer 1

该导航计时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中首先发送它.该脚本将做两件事:

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,而是添加到事件处理程序列表中.