Friday, January 29

Notes : Performance Beyond the Page Load by Ryan Seddon


Performance beyond the page load
Slow sites loose people

UI Performance

Browser Rendering Pipeline - 4 stages
1) Style Recalculation
Eg, Browser resize, Hover on button etc. The browser needs to figure out.

2) Layout/Reflow
This does not happen always. Figure out the position, layout etc on certain activity.

Reflow is the process by which the geometry of the layout engines formatting objects are computed - Chris waterson

3) Paint/ Rasterize paint 
Figure out where everything lies on the page. The browser then draws the graphic. Paint is about setting up the instructions. Paint does not always happen.

4) Composite
Takes all the instructions and gives to GPU to render the graphics.

60FPS/16.6MS matches with a average display i.e 60Hz

Use the transform and oapacity (CSS properties) so that browser does not have to do much and the animations load real fast. Refer csstriggers.com

When using transform and opacity, the graphics card comes into picture, i.e the GPU

Be the first one to Comment!!!

Post a Comment