Browser rendering optimization

Browser-rendering-optimization.md

Browser rendering optimization

Critical rendering path

DOM + CSSOM = RENDER TREE

Only elements with style dispaly:none are not included in the render tree

event -> recalculate style -> [layout] -> update render tree -> [paint] -> composite layers

Timeline tool

css triggers

RAIL: response(responsive)(3)(100ms), animations(4)(16ms), idle(2)(chunks of 50ms), load(1)(1s)

idle: time where you can load expensive resources

animations: First(start animation) Last(end animations) Invert Play

• precalculating expensive work in idle
• code example

Debug webApp on android devices:

• Connect your device with USB debug options
• in Chrome on laptop, type chrome://inspect

requestAnimationFrame : schedules Javascript (paying attention to the rendering pipeline)

Web Workers Spawn example

Garbage Collection

Exercise

CSS Selector

Correct Render Flow:

• JS > Style > Layout > Paint > Composite

Slow stuff:

var paragraphs = odcument.querySelector('p');
var greenBlock = document.getElementById('block');

for (var p = 0; p < paragraphs.length; p++) {
  var blockWidth = greenBlock.offsetWidth;
  paragraphs[p].style.width = blockWidth + 'px';
}

In the example above, get offsetWidth call Layout and setting Style call Style so the render flow is compromized.

Promoting elements to layers instead of painting in a single layer (be careful)

• CSS trick