- Loading (very small like 1ms)
- Scripting
- Rendering
- Painting
- System
- Idle
Chrome tabs explained bycommand_line_fanatic https://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art036#:~:text=Scripting%20refers%20to%20Javascript%20events,the%20CSS%20%22box%20model%22.
Now you see that the browser did quite a bit of internal work in the roughly 23ms after the response was received. Chrome breaks the individual events into high-level color-coded categories: loading in blue, scripting in yellow, rendering in purple and painting in green. Loading refers to network interaction — loading and parsing HTML, CSS and Javascript. Scripting refers to Javascript events and event handlers. Rendering and painting have to do with the translation of HTML elements to displayable on-screen elements — primarily the processing of the CSS “box model”. This explains the three lines in the summary view at the top; loading events is the first bar, scripting events the second, and rendering/painting (which are obviously intertwined) in the third. Here you can see exactly how long Chrome spent performing each individual task. The pie chart on the right also breaks down the relative time spent on each type of task as well as the idle time within the timeframe you selected.