【发布时间】:2011-03-04 06:04:54
【问题描述】:
我需要有一种方法或工具来测试浏览器将整个页面呈现给用户的实际感知呈现时间。有什么建议么?
我问的原因是因为 firbug 和 Yslow 只报告 DomContentLoaded 和 OnLoad 时间。
例如,我的应用程序报告内容的时间为 547 毫秒 (onLoad:621 毫秒)。但实际内容渲染大约 3 秒。我知道是因为我实际上从我在浏览器的 url 字段中输入的那一刻到内容出现在我眼前的那一刻,我慢慢地数了 1、2、3。所以我知道 547ms 和 621ms 并不代表页面加载所需的实际时间。
不确定这是否有帮助。但我的应用程序
在服务器端渲染 json 数据,在服务器将整个 html 返回到浏览器之前,将数据与页面的其余部分 html 一起保存为 javascript 变量
页面加载 Jquery 1.5 和 Jquery 模板
jquery 代码从步骤 1 中定义的变量中抓取 json 数据
使用 jquery 模板来呈现页面。
从技术上讲,这里不涉及 Ajax,页面上的图像都被缓存了。我没有看到任何萤火虫下载。
[编辑]
我想弄清楚的是在萤火虫报告 onLoad 时间(在我的情况下为 621 毫秒)之后,到页面完成并在我眼中加载的时间(至少 3 秒),发生了什么2.4秒之间?那里发生了什么?浏览器在做什么?有什么东西挡住了?网络?这是什么?
【问题讨论】:
-
为什么要计数,可以使用 firebug、pagespeed 或 yslow。 firebug net 面板为您提供所有详细信息
-
Siri。就像我说的,萤火虫和 Yslow 没有报告准确的时间。从我按下 Enter 到页面加载到我眼前,有 3 秒的空白屏幕。然而,firebug 和 yslow 都以毫秒为单位报告。好像页面正在快速点亮。然而,在用户看来,它并没有那么快,而这正是我想要捕捉的。不要萤火虫也不要yslow。但在用户看来,就是“感知”的时间。
-
@如果这不是您的网站,并且如果您正在为一家公司工作,请尝试使用一些第三方公司为您做这件事,例如主题演讲等。他们在全球范围内执行各种负载并获取页面的平均加载时间,您可以查看页面变慢或变快的完整分析。
-
@siri。谢谢。这是我正在开发的应用程序,所以不确定第三方公司是否可以做到这一点?此外,即使是这个 stackoverflow 网站。当我点击主页时,萤火虫报告 1.21(onLoad 1.2) 秒。但是我看到我的时钟移动了 4s+ 以加载主页。怎么了?
标签: javascript jquery performance browser rendering