Idle and Other times in Chrome Developer Tools. Why the browser is inactivity for so long?

simhumileco picture simhumileco · Nov 9, 2016 · Viewed 17.2k times · Source

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...

Answer

simhumileco picture simhumileco · Nov 9, 2016

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".