如何监视浏览器中的渲染时间？

我在使用Tomcat的Web前端的内部公司系统上工作。如何监视浏览器中的渲染时间？

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

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

来源

2010-03-25 adpd

你知道 “提琴手”（https://www.fiddler2.com/fiddler2/version.asp）？ – XpiritO 2010-03-25 15:09:37

提琴手可以测量执行请求并将其传输到客户端所用的时间，但如果该网站的JavaScript较大或较大，浏览器在处理DOM和JavaScript时会有额外的延迟。对于IE6尤其如此。 – driis 2010-03-25 15:13:20

“提琴手不需要”：D – adpd 2010-03-25 16:48:43

如果浏览器启用了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后覆盖，但增加了事件处理程序列表，而不是。

来源

2010-03-25 17:00:18

+1 - 这听起来像我目前所想的那种。很高兴能够得到这种思路的确认。有人认为这是错误的做法？ – adpd 2010-03-25 19:00:46

现在已经过时。这是你在2010年可以做到的最好的，但在2012年，大多数浏览器都支持W3C Performance Timing规范，这是获取此信息的更好方法。 – Ian 2012-04-12 17:57:43

这不起作用。它测量时间，直到所有内容都被加载，但没有被渲染。尝试生成一个大的SVG。 'onload'事件在SVG图片的大小已知时被触发，但用户在渲染之前可能会看不到该图片一段时间。 – 2017-04-16 16:09:30

就非侵入性技术而言，Hammerhead用于衡量整个加载时间（包括JavaScript执行），尽管仅限于Firefox。

我已经看到可用的结果，当JavaScript片段可以被添加到全球来衡量每个页面加载操作的开始和结束。

来源

2010-03-25 15:16:01

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

来源

2010-03-25 15:21:58 pitpod

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

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

来源

2010-03-25 17:25:59

我同意IE的市场上（太）“少量工具”。编写插件可能不是一个坏主意。我可以看看那个。感谢您对Chrome提出的建议，但客户机必须暂时运行IE6，因为这是企业IT政策。当升级到来时，肯定会是IE7或IE8。如果只有我有其他浏览器的奢侈... – adpd 2010-03-25 19:40:30

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

来源

2010-04-01 10:25:49 Zoltan

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

来源

2014-09-23 08:41:07

如何监视浏览器中的渲染时间？

回答

相关问题