javascript - 如何测试渲染时间(不是 DomContentLoaded 也不是 onLoad)？

Question

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

我问的原因是因为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 下载其中任何一个。

[编辑]

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

Answer 1

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