what's mean chrome devtool timeline Frames outlined rectangle?

Question

(click for larger)

blue - loading, yellow - Scripting, purple - Rendering, green - Painting

but there has many outlined rectangle,what is that?

Answer 1

@leiyonglin

Google Chrome developers have defined a standard metric for Frame load. its 60 Frames per second which by common sense coincides with the Screen Refresh rate of 60Hz. So a Frame should take 1/60 secs approx. 16 ms. Each vertical bar represents a frame and it should be within a specific time-limit , which you see as a horizontal bar, for your page to be responsive enough. Each frame can have multiple of things going on from scripting,paint, loading. Loading means - N/w Request like image transfer (url) ...The outlined rectangle thus statistically speaks of these processes (blue - loading, yellow - Scripting, purple - Rendering, green - Painting). The colorless part of rectangle tells amount of time it takes for Browser (GPU/CPU) to process the whole frame. You can go through the link to understand more :
https://developers.google.com/events/io/sessions/gooio2012/209/

See screen shot and analysis for one 1 frame

In this one frame shows , there are 2 paint jobs and one JS event spanned over 13.917 ms All the events mentioned (Loading,Paint etc) are collated and rest of the time is by the browser , CPU/GPU