如何找到呈现HTML页面需要多长时间？ [英] How to find how long it takes to render a HTML page?

问题描述

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

注意：我想使用JavaScript来显示在页面上的价值。

解决方案

但是你想用JavaScript来做。所以这需要付出一点努力，但是这样做。转到控制台并执行performance.timing。这会给你一个有很多计时值的对象。这些是刻度值，你需要比较它们以得到实际的毫秒增量。

  {
 [函数]：，
 __proto__ ：{}，
 connectEnd：1382671634858，
 connectStart：1382671634858，
构造函数：{}，
 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 
} 
  

I have a large page that has a large HTML table. In Internet Explorer, it takes a long time to render the content: possibly, 10-15 seconds to render. Is there a way with JavaScript or something else to determine when the page starts to render and when it is completely done rendering?

Note: I want to use JavaScript to then display the value on the page.

解决方案

well I was going to say use the Network waterfall in the F12 tools, here is a screenshot of this page. The green line indicates when the render is done and the user can start interacting.

But you want to do it in JavaScript. So that is going to take a little effort but here goes. Go to the console and execute performance.timing. This will give you an object with a lot of timing values. These are tick values and you will need to compare them to get actual millisecond deltas. Here is an example of the output for this page.

    {
   [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
}

这篇关于如何找到呈现HTML页面需要多长时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！