如何找到渲染 HTML 页面需要多长时间？答案

【问题标题】：How to find how long it takes to render a HTML page?如何找到渲染 HTML 页面需要多长时间？
【发布时间】：2013-11-03 22:24:46
【问题描述】：

我有一个包含大型 HTML 表格的大页面。在 Internet Explorer 中，呈现内容需要很长时间：可能需要 10-15 秒来呈现。有没有办法使用 JavaScript 或其他方法来确定页面何时开始渲染以及何时完全完成渲染？

注意：我想使用 JavaScript 然后在页面上显示值。

【问题讨论】：

检查这个link
您正在测试哪个版本的 IE 以及它与最近的 IE10+/FF/Chrome 相比如何？
您可以从this SO answer 找到一些如何减少渲染时间的指南。还要注意评论线程中链接的 jsFiddle。

标签： javascript html internet-explorer

【解决方案1】：

如果您使用的是最新版本的 Internet Explorer，则可以使用 Javascript NavTiming API，如 this MSDN article 中针对 IE 所述。这将允许您使用 Javascript 读取页面计时数据并显示它。

或者你可以使用 IE 的 Developer Toolbar 插件。

【讨论】：

+1... 如果它确实是 JavaScript，那么常规分析器就足够了 - 从 IE9 开始可用。

【解决方案2】：

well 我想说的是使用 F12 工具中的网络瀑布，这里是这个页面的截图。绿线表示渲染完成并且用户可以开始交互。

但是你想用 JavaScript 来做。所以这需要一点努力，但这里就是这样。转到控制台并执行 performance.timing。这将为您提供一个具有大量计时值的对象。这些是刻度值，您需要比较它们以获得实际的毫秒增量。这是此页面的输出示例。

    {
   [functions]: ,
   __proto__: { },
   connectEnd: 1382671634858,
   connectStart: 1382671634858,
   constructor: { },
   domainLookupEnd: 1382671634858,
   domainLookupStart: 1382671634858,
   domComplete: 1382671635972,
   domContentLoadedEventEnd: 1382671635377,
   domContentLoadedEventStart: 1382671635198,
   domInteractive: 1382671635198,
   domLoading: 1382671634929,
   fetchStart: 1382671634858,
   loadEventEnd: 1382671635974,
   loadEventStart: 1382671635973,
   msFirstPaint: 1382671635631,
   navigationStart: 1382671634796,
   redirectEnd: 0,
   redirectStart: 0,
   requestStart: 1382671634929,
   responseEnd: 1382671634929,
   responseStart: 1382671634929,
   unloadEventEnd: 1382671634796,
   unloadEventStart: 1382671634796
}

【讨论】：

感谢克里斯蒂安，我在这里永远无法正确格式化代码 LOL

【解决方案3】：

当然，使用 firefox 或 chrome 中的开发人员工具计时。您将使用 net 选项获得时间，并在下载每个文件时看到其下载时间。

【讨论】：

OP 说 Internet Explorer。
+1 - 使用 FF/Chrome 的开发工具没什么问题 - 如果下载速度慢的问题很容易看到。此外，所有浏览器中的大量 JavaScript 问题或多或少都是一样的。
从问题的表述方式来看，我认为这是一个特定于 IE 的问题，但可能不是。
我认为现在是 IE 赶上提供此类工具的其他浏览器的时候了。由于 HTML 和 JavaScript 是通用的，我猜想关于它们在一个浏览器中的行为的信息也应该让你对其他浏览器有所了解。
好吧 10 秒告诉我应用程序存在一些重大问题。太多的下载，阻塞，可能是第 3 方 SPOFS，可能是一些网络字体等。我有一个 1 秒规则，如果内容不能在 1 秒内交互，我的开发还没有完成。但是开发工具有助于隔离许多问题，并且从 ie8 顺便说一句就已经存在，所以现在已经有 5 年了。

【解决方案4】：

使用萤火虫找出需要多少时间，否则您可以使用这些网站进行测试以找出答案

http://tools.pingdom.com

https://developers.google.com/speed/pagespeed/

【讨论】：