Javascript 如何监控浏览器中的渲染时间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2516665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I monitor the rendering time in a browser?
提问by adpd
I work on an internal corporate system that has a web front-end using Tomcat.
我在一个内部公司系统上工作，该系统具有使用 Tomcat 的 Web 前端。
- How can I monitor the rendering time of specific pages in a browser (IE6)?
- I would like to be able to record the results in a log file (separate log file or the Tomcat access log).
- 如何在浏览器 (IE6) 中监控特定页面的渲染时间？
- 我希望能够将结果记录在日志文件（单独的日志文件或 Tomcat 访问日志）中。
EDIT: Ideally, I need to monitor the rendering on the clients accessing the pages.
编辑：理想情况下，我需要监视访问页面的客户端的渲染。
采纳答案by Vlad Gudim
In case a browser has JavaScript enabled one of the things you could do is to write an inline script and send it first thing in your HTML. The script would do two things:
如果浏览器启用了 JavaScript，您可以做的一件事就是编写一个内联脚本并在您的 HTML 中首先发送它。该脚本将做两件事：
- Record current system time in a JS variable (if you're lucky the time could roughly correspond to the page rendering start time).
- Attach JS function to the page onLoad event. This function will then query the current system time once again, subtract the start time from step 1 and send it to the server along with the page location (or some unique ID you could insert into the inline script dynamically on your server).
- 在 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 ...
You'd need to make sure that the page doesn't override onload later in the code, but adds to the event handlers list instead.
您需要确保页面不会在代码中稍后覆盖 onload，而是添加到事件处理程序列表中。
回答by Brian Low
The Navigation Timing APIis available in modern browsers (IE9+) except Safari:
该导航计时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);
}
回答by Nathan Osman
Since others are posting answers that use other browsers, I guess I will too. Chromehas a very detailed profiling system that breaks down the rendering time of the page and shows the time it took for each step along the way.
由于其他人发布了使用其他浏览器的答案，我想我也会。Chrome有一个非常详细的分析系统，可以分解页面的渲染时间并显示每一步所花费的时间。
As for IE, you might want to consider writing a plugin. There seems to be few tools like this on the market. Maybe you could sell it.
至于 IE，您可能要考虑编写一个插件。市场上似乎很少有这样的工具。也许你可以卖掉它。
回答by Zoltan
On Firefox you can use Firebug to monitor load time. With the YSlow plugin you can even get recommendations how to improve the performance.
在 Firefox 上，您可以使用 Firebug 来监控加载时间。使用 YSlow 插件，您甚至可以获得如何提高性能的建议。
回答by Tomislav Nakic-Alfirevic
As far as non-invasive techniques are concerned, Hammerheadmeasures complete load time (including JavaScript execution), albeit in Firefox only.
就非侵入性技术而言，Hammerhead测量完整的加载时间（包括 JavaScript 执行），尽管仅适用于 Firefox。
I've seen usable results when a JavaScript snippet could be added globally to measure the start and end of each page load operation.
当可以全局添加 JavaScript 代码段来衡量每个页面加载操作的开始和结束时，我已经看到了可用的结果。
回答by pitpod
Have a look at Selenium- they offer a remote control that can automatically start different browsers (e.g. IE6), load pages, test for specific content on the page. At the end reports are generated that also show the rendering times.
看看Selenium- 它们提供了一个远程控制，可以自动启动不同的浏览器（例如 IE6）、加载页面、测试页面上的特定内容。最后生成的报告也显示了渲染时间。
