In the current Chrome version (46) the DevTools Timeline contains a bunch of new charts. The meaning of most of those charts is not obvious to me. Unfortunatly I could not find any documentation on them either. Can someone explain the meaning of those charts?
This is the overview bar on Chrome DevTools Timeline panel.
From top to bottom:
yellow/green ticks are input activity, e.g. mouse moves/click, key press. Each has it's own color. Btw you have to enable a Chrome DevTools experiment to see this bar.
red stripes bar is page responsiveness indicator. If you have a particular issue at some point it shows a red bars. The problems detected include long frames, excessive or forced layouts, etc.
green chart is current frame rate. The higher -- the better. Max is 60fps.
next bar is CPU utilization. The full bar height means 100% CPU is busy. Colors correspond to the type of activity: yellow is JavaScript, purple is style recalc or page layout, green is rendering/painting, blue is html parsing or blocking network interactions.
thin stripes below CPU are network requests currently in flight. Colors depict content type: blue is html, green is media (images, fonts etc), purple is css, yellow is JavaScript, grey is for all others.
Menu
758
