Home/ Questions/Q 9320425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T03:37:54+00:00

(click for larger) blue – loading, yellow – Scripting, purple – Rendering, green –

  • 0

enter image description here
(click for larger)

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

but there has many outlined rectangle,what is that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @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

    enter image description here

    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

    • 0