-1

I use below syntax to find page loading time but not sure how to identify page rendering time using javascript.

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
TylerH
  • 20,799
  • 66
  • 75
  • 101
Green Computers
  • 723
  • 4
  • 14
  • 24
  • https://stackoverflow.com/questions/2516665/how-can-i-monitor-the-rendering-time-in-a-browser – bhansa Sep 11 '17 at 07:13
  • 1
    Possible duplicate of [How can I monitor the rendering time in a browser?](https://stackoverflow.com/questions/2516665/how-can-i-monitor-the-rendering-time-in-a-browser) – Vijay Rathore Sep 11 '17 at 07:16
  • var rendertime = window.performance.timing.domComplete-window.performance.timing.domContentLoadedEventEnd – Vibhu Sep 11 '17 at 07:38
  • @Vibhu: Can u add this as your answer. – Green Computers Sep 11 '17 at 09:02
  • What do you call rendering time? There will be a lot of rendering during the page life. – Kaiido Sep 11 '17 at 09:14
  • @Kaiido: Render time is the time it takes to actually process downloaded Js, CSS, images and show their end-result to the visitor. – Green Computers Sep 11 '17 at 09:21
  • That's only the first rendering then, and it might not be easy to get a precise time for it with only WebAPIs... there is not really a paint event, the closest I can think of is transition-end, but you'll always have a delay. – Kaiido Sep 11 '17 at 09:47

1 Answers1

1
var rendertime = window.performance.timing.domComplete-window.performance.tim‌​ing.domContentLoaded‌​EventEnd
Vibhu
  • 536
  • 1
  • 3
  • 11
  • That's parsing time, not rendering time. – Kaiido Sep 11 '17 at 09:13
  • 1
    Well , as per this answer , both rendering and parsing almost occur simultaneously.. https://stackoverflow.com/a/35966477/4589611 – Vibhu Sep 11 '17 at 09:26
  • Well that might be true for the first one, but all subsequent renderings will have nothing to do with parsing. https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers and https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction (But it seems OP is only interested in this first rendering) – Kaiido Sep 11 '17 at 09:44