2

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.

hopper
  • 13,060
  • 7
  • 49
  • 53
Berlin Brown
  • 11,504
  • 37
  • 135
  • 203
  • check this **[link](http://stackoverflow.com/questions/2516665/how-can-i-monitor-the-rendering-time-in-a-browser)** – super Oct 25 '13 at 00:24
  • 2
    What version of IE you are testing and how it compares to recent IE10+/FF/Chrome? – Alexei Levenkov Oct 25 '13 at 00:30
  • You can find some guidelines how to reduce the rendering time from [this SO answer](http://stackoverflow.com/a/18272010/1169519). Notice also a linked jsFiddle in the comment thread. – Teemu Oct 25 '13 at 08:27

4 Answers4

4

If you're using a recent version of Internet Explorer, you can use the Javascript NavTiming API, as described for IE in this MSDN article. This'll allow you to read page timing data with Javascript and display it.

Or you can use IE's Developer Toolbar add-on.

Christian Ternus
  • 8,406
  • 24
  • 39
3

enter image description herewell 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
}
Christian Ternus
  • 8,406
  • 24
  • 39
Chris Love
  • 3,740
  • 1
  • 19
  • 16
0

sure, time it with developer tools in firefox or chrome. you'll get timings using the net option, and you'll see download times for each file as it downloads.

duffymo
  • 305,152
  • 44
  • 369
  • 561
  • The OP said **Internet Explorer**. – Christian Ternus Oct 25 '13 at 00:25
  • +1 - nothing wrong with using dev tools of FF/Chrome - if the problem with slow downloads it will be easily visible. Also large number of JavaScript issues will be visible in all browser more or less equally. – Alexei Levenkov Oct 25 '13 at 00:29
  • I'd assumed from the way the question was phrased it was an IE-specific issue, but maybe not. – Christian Ternus Oct 25 '13 at 00:30
  • I think it's about time IE caught up with other browsers that offer such tools. And since HTML and JavaScript are universal, I'd guess that info about their behavior in one browser ought to give you an idea for others as well. – duffymo Oct 25 '13 at 09:11
  • Well 10 seconds tells me there are some major issues with the application. Too many downloads, blocking, possibly 3rd party SPOFS, maybe some web fonts etc. I have a 1 second rule, if the content cannot be interacted within 1 second I am not done with my development. But the dev tools help isolate many issues and have been around since ie8 btw, so like 5 years now. – Chris Love Oct 26 '13 at 18:16
  • Or just synchronous server-side calls that are taking that long. Your list is hardly exhaustive. – duffymo Oct 26 '13 at 18:29
0

use firebug to findout how much time it takes otherwise you can test with these sites to findout

http://tools.pingdom.com

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

Sridhar R
  • 20,190
  • 6
  • 38
  • 35