29

What is included in "Idle" and "Other" times into Sumary of Timeline tab in Chrome Developer Tools?

enter image description here

What causes so much inaction?

Why do these occur?

How to reduce these times? Is it possible?

Why the browser is inactivity for so long (in the context of idle time)?

At the beginning of more than 1.8 seconds nothing happens:

enter image description here

In the middle the "Idle" and the "Other" occupy about 0.3 seconds:

enter image description here

At the end of almost 3 seconds nothing happens:

enter image description here

In this example, we have almost five seconds of inactivity browser...

simhumileco
  • 31,877
  • 16
  • 137
  • 115
  • 1
    `Idle` is obviously the time when nothing has happened so I'm not sure why you would want to reduce it. `Other` is the js engine event loop overhead as you can see after clicking gray horizontal blocks in timeline. You can write less code to reduce it I guess :-) – wOxxOm Nov 09 '16 at 14:04
  • @wOxxOm, do you know why the browser is idle for so long (in the context of idle time)? – simhumileco Nov 09 '16 at 14:18
  • Unfortunately I can not add a link but I can share a full screenshot in question. – simhumileco Nov 09 '16 at 14:39
  • 3
    Ah, enable all checkboxes in the toolbar to see the network requests. Also, go to chrome://flags/#enable-devtools-experiments and enable it, restart Chrome, go to devtools, settings, experiments, tap Shift key 6 times, select all Timeline-related experiments. – wOxxOm Nov 09 '16 at 15:29
  • 2
    Well, now you can investigate idle areas where nothing seems to happen. Drag the `Main` graph upwards to see what happens in Raster, GPU, Compositor graphs as well. – wOxxOm Nov 10 '16 at 08:13
  • At the beginning of more than 1.8 seconds nothing happens... – simhumileco Nov 10 '16 at 08:53
  • 1
    Er, it shows the network resource is loading, which means the server is slow. – wOxxOm Nov 10 '16 at 08:54
  • @wOxxOm thank you for showing me new opportunities DevTools about which I had no idea... :-) – simhumileco Nov 10 '16 at 08:55
  • @wOxxOm, maybe you have an idea why the browser is not active at the end of the nearly three seconds? – simhumileco Nov 10 '16 at 09:23
  • Maybe waiting for a AJAX response does have it matter? – simhumileco Nov 10 '16 at 11:28
  • 4
    I speculate that idle time is waiting for the server to reply, clear browser processes after operations, etc. I was trying to figure out the why there is idle time and why it changes. I re-coded a page that had 47 html errors, two 404's, and I combined a few scripts. Load time decreased from ~2.4s to ~1.05 seconds. Idle time decreased from 1813ms to 485ms. On the bad page, there was around 750ms idle time between the initial requests and rendering. Perhaps the browser was processing bad code (idle?) -- not loading, rendering, scripting, or painting? Other time remained about the same. – Sterner Jan 02 '17 at 19:53
  • @Sterner you're observation is very interesting! – simhumileco Jan 03 '17 at 09:17

4 Answers4

6

The "Idle" state occurs when the browser has not yet completed the final rendering of the page on the screen but must put the process on hold while waiting for missing data or resources needed to resume and complete it.

We can deal with long "Idle" periods, for example, when the browser waits for a synchronous response, which is generated for a long time on the server-side.

The "Idle" state should not be confused with the "Loading" state, which is the time the browser actually uploads the response (from the first to the last byte), not the time from sending the request to uploading the response.

The "Other" state represents the time of all browser activities other than those listed in the pie chart, such as DOM tree building, CSSOM and others.

This issue is partly explained on the "Render-tree Construction, Layout, and Paint" website.

simhumileco
  • 31,877
  • 16
  • 137
  • 115
1

I found part of the answer on Addy Osmani's blog:

In Frame mode, the shaded vertical bars correspond to recalculating styles, compositing and so on. The transparent areas of each vertical bar correspond to idle time, at least, idle on the part of your page. For example, say your first frame takes 15ms to execute and the next takes 30ms. A common situation is that frames are synchronized to refresh rate and in this case, the second frame took slightly longer than 15ms to render. Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.

But this does not exhaust the topic.

Example from which the chart included in the question did not use frames.

I still do not know how to shorten the time, and what is hidden under "Other".

simhumileco
  • 31,877
  • 16
  • 137
  • 115
  • 2
    Couldn't understand anything from this answer. Especially `Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.` What do you mean? – Jogi Nov 15 '17 at 18:55
  • @RehanKhan please check it on https://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/ blog – simhumileco Nov 15 '17 at 23:11
  • 1
    Already did. Thought you understood something from it (cause I didn't) and would probably explain in your words what author meant by `Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.` – Jogi Nov 16 '17 at 12:56
  • 1
    There two thing going on in your screen while the page is load. The Hardware screen refresh and the frame rendering code running. Usually both are arranged in sync and doesnt cause a delay. Remember the hw screen refresh happens in a predetermined time. But imagine if the first frame load takes more time than the hw screen load. the First frame load will wait till the second screen refresh happens and start rendering. hence the second frame load is delayed. – Linus Aug 22 '18 at 10:36
  • @Linus thank you for your comment! Could you write it as answer and develop it some more? Do you think that the topic you describe may refer to "Idle" or "Others", or maybe to both? Is this the only reason? Do you think can there be some other reasons? – simhumileco Aug 22 '18 at 15:11
1

Check out this topic

Idle is just that, nothing was going on so nothing to worry about as far as I know.

Other is "un-instrumented activity". Which is stuff that currently isn't able to be broken down. So, you can't analyze what was going on in there from the DevTools.

Community
  • 1
  • 1
Hristo Enev
  • 2,421
  • 18
  • 29
1

Using Start profilling and reload page button instead of Record button will give the results we are waiting, since it stops recording after page to finish the loading, reducing idle.

sdlins
  • 2,195
  • 1
  • 23
  • 31