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

发布于 2024-08-26 22:33:52 字数 168 浏览 6 评论 0原文

我负责一个内部公司系统，该系统具有使用 Tomcat 的 Web 前端。

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

理想情况下，我需要监视访问页面的客户端上的渲染。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

征﹌骨岁月お 2024-09-02 22:33:53

导航计时 API 适用于所有现代浏览器。

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

The Navigation Timing API is available in all modern browsers.

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

回复收藏 0 原文

怪我入戏太深 2024-09-02 22:33:53

如果浏览器启用了 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，而是添加到事件处理程序列表中。

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:

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).

<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.

回复收藏 0 原文