如何查找呈现HTML页面所需的时间？

Question

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

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

Answer 1

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

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

Answer 2

我打算在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
}

Answer 3

当然，请使用firefox或chrome中的开发人员工具。你可以使用net选项获得时间，并且在下载时你会看到每个文件的下载时间。

Answer 4

使用firebug来了解需要花费多少时间，否则您可以使用这些网站进行测试以找出

http://tools.pingdom.com

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