如何测试渲染时间(不是 DomContentLoaded 也不是 onLoad)?

发布于 2024-10-20 09:34:20 字数 712 浏览 0 评论 0原文

我需要一种方法或工具来测试浏览器向用户呈现整个页面的实际感知渲染时间。有什么建议吗?

我问的原因是因为firbug和Yslow只报告DomContentLoaded和OnLoad时间。

例如,我的应用程序报告内容耗时 547 毫秒(onLoad:621 毫秒)。但实际内容渲染时间大约为 3 秒。我知道是这样,因为从我在浏览器的url字段中敲回车的那一刻到内容出现在我眼前的那一刻,我实际上慢慢地数着1、2、3。所以我知道 547 毫秒或 621 毫秒并不代表页面加载所需的实际时间。

不确定这是否有帮助。但是我的应用程序

  1. 在服务器端渲染json数据,在服务器将整个html返回到浏览器之前将数据与页面的其余html一起保存为javascript变量

  2. 页面加载 Jquery 1.5 和 Jquery 模板

  3. jquery 代码获取来自步骤 1 中定义的变量的 json 数据

  4. 使用 jquery 模板来渲染页面。

从技术上讲,这里不涉及Ajax,页面上的图像都被缓存了。我没有看到萤火虫下载其中任何一个。

[编辑]

我想要弄清楚的是,在 firebug 报告 onLoad 时间(在我的情况下为 621 毫秒)之后,到页面完成并在我眼中加载的时间(至少 3 秒),发生了什么中间有2.4秒?那里发生了什么?浏览器正在做什么?有什么东西挡住了?网络?它是什么?

I need to have a way or tools to test the actual perceived rendering time for the browser to render the entire page to users. Any suggestions?

The reason I ask is because firbug and Yslow only reports the DomContentLoaded and OnLoad time.

For instance, my application reports 547ms (onLoad:621ms) for the contents. But the actual content is rendered around 3 seconds. I know so because I actually counted 1, 2, 3 slowly from the moment I hit enter in the url field of the browser to the moment when content appears in front of my eyes. So I know 547ms nor 621ms DOES NOT represents the actual time it takes for the page to load.

Not sure if this helps. But my application

  1. renders json data on the server side, save the data as a javascript variable along with the rest of the page's html before server returns the entire html to browser

  2. page loads Jquery 1.5 and Jquery template

  3. jquery code grabs the json data from the variable defined at step 1

  4. use jquery template to render the page.

Technically, no Ajax involved here and images on the page are all cached. I don't see firebug downloads any of them.

[Edit]

What i'm trying to figure out is after the firebug reported onLoad time which in my case is 621ms, to the time the page is completed and loaded in my eyes (which is at least 3 seconds), what happened to the 2.4s in between? What took place there? Browser is doing something? Something is blocking? Network? what is it?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

挖鼻大婶 2024-10-27 09:34:20

Google Chrome 具有优秀内置审核功能。您的结果可能会有所偏差,因为它是目前最快的浏览器之一,但它会为您提供 Chrome 所需时间的准确测量结果。Chrome 进行渲染。 =)

Google Chrome has excellent auditing built in. Your results will be skewed because it's one of the fastest browsers right now, but it will give you exact measurements of how long it takes for Chrome to render. =)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文