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

【问题标题】：How can I monitor the rendering time in a browser?如何在浏览器中监控渲染时间？
【发布时间】：2011-01-31 18:43:19
【问题描述】：

我在一个内部公司系统上工作，该系统有一个使用 Tomcat 的 Web 前端。

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

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

【问题讨论】：

你知道“提琴手”（fiddler2.com/fiddler2/version.asp）吗？
Fiddler 可以测量请求执行并传输到客户端所需的时间，但是如果站点是 javascript 繁重或大型，则在浏览器处理 DOM 和 javascript 时会有额外的延迟.对于 IE6 尤其如此。
此外，Fiddler 搞砸了我的系统。我不会在我的机器上安装它。

标签： javascript performance browser rendering monitoring

【解决方案1】：

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

当可以全局添加 JavaScript sn-p 以测量每个页面加载操作的开始和结束时，我已经看到了有用的结果。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

在 JS 变量中记录当前系统时间（如果幸运的话，时间可以大致对应于页面渲染开始时间）。
将 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，而是添加到事件处理程序列表中。

【讨论】：

+1 - 这听起来像是我目前的想法。很高兴得到这种思路的确认。有人认为这是错误的方法吗？
现在已经过时了。这是您在 2010 年所能做的最好的事情，但在 2012 年，大多数浏览器都支持 W3C 性能计时规范，这是获取此信息的更好方法。
这不起作用。它测量直到所有内容都加载但未渲染的时间。尝试生成一个大的 SVG。当 SVG 图片的大小已知时，onload 事件会被触发，但用户可能在一段时间内看不到图片，直到它被渲染。

【解决方案4】：

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

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

【讨论】：

我同意 IE 市场上的（太）“少数工具”。编写插件可能不是一个坏主意。我可以看看那个。感谢您对 Chrome 的建议，但客户端计算机暂时必须运行 IE6，因为这是公司 IT 政策。当升级来临时，它肯定是 IE7 或 IE8。如果我有其他浏览器的奢侈...

【解决方案5】：

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

【讨论】：

【解决方案6】：

Navigation Timing API 在除 Safari 之外的现代浏览器 (IE9+) 中可用：

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

【讨论】：