【问题标题】:How to test rendering time (not DomContentLoaded nor onLoad)?如何测试渲染时间(不是 DomContentLoaded 也不是 onLoad)?
【发布时间】:2011-03-04 06:04:54
【问题描述】:

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

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

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

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

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

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

  3. jquery 代码从步骤 1 中定义的变量中抓取 json 数据

  4. 使用 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


【解决方案1】:

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

【讨论】:

  • 好的。我从未尝试过chrome,只是试了一下,开发人员工具确实比firebug好得多。我喜欢!唯一的问题就是太快了! 547 毫秒现在下降到 100-200 毫秒。我什至不知道如何监控它了。但我确实喜欢它显示三个标记的事实。渲染时间。 OnLoad 时间和 DomContentOnLoad 时间。更有用。谢谢
  • 很高兴你喜欢它!我会说,我仍然在 FireFox 的萤火虫上进行日常开发。 (Chrome的firebug越来越接近了,不过我还是更喜欢FF的=)
  • 同意。唯一阻止我一直使用 Chrome 的是你编辑 CSS 的方式。我真的很喜欢在 FF 中你可以按 Enter 键来完成 CSS 规则并跳转到值部分,而在 Chrome 中你必须使用右箭头键。不是什么大问题,但它还是让我很恼火。
猜你喜欢
  • 2013-04-03
  • 1970-01-01
  • 1970-01-01
  • 2019-07-16
  • 1970-01-01
  • 1970-01-01
  • 2018-02-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多