Idle and Other times in Chrome Developer Tools. Why the browser is inactivity for so long?
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.
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".
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.