01 Best Practice for CSS, HTML & JS

Details

GOAL : 50 /60 frames per second

NOTE: 16-20 milliseconds to compute and draw each frame

Optimisation Tools

 

  • “display:none” to objects that are not visible 
  • Minimize nesting in the DOM
  • Use a 2D transform (“transform:translate(x,y)”) rather than “top:y” and “left:x” 

 

  • Batch geometry reads from the DOM and modification of the DOM and avoid interleaving reads and writes 
  • Constrain all animations within a render layer 
  • Avoid overlapping render layers  

 

  • Add elements to the DOM using DOM APIs => avoids reparsing the existing HTML
var popupDiv = document,createElement(“div”);
popupDiv.setAttribute(“class”,”popup”);
popupDiv.appendChild( document.createTextNode(”Much better”) );
document.body.appendChild(popupDiv); 
  • Create a DOM fragment and then add the fragment to the DOM

LAYOUT CALCULATION

.offscreen > * {
       display:none;

} 

NOTE:

Changing one of these styles trigger layout

Width page10image15328 page10image15528Height page10image15960min-height

Padding Margin Bottom

Display page10image24168 page10image24368border-width page10image24800Clear

Border page10image25952 page10image26152Top page10image26584white-space

Position page10image27720 page10image27920font-size page10image28352vertical-align

Float page10image29104 page10image29304text-align page10image29736Right

overflow-y page10image30888 page10image31088font-weight page10image31520line-height

Overflow page10image32656 page10image32856Left page10image33288font-family 

 

Note: Use transform instead of top:x or top:y

Use a 2D transform (“transform:translate(x,y)”) rather than “top:y” and “left:x” 

Another source of layout that is often overlooked is requesting the geometry of an object from JavaScript. Requesting the size or position of a DOM element forces the browser to perform layout before it can provide the answer to JavaScript. 

 

// Read (might require layout)

var h1 = element1.clientHeight; // Write (invalidates layout)

element1.style.height = (h1 * 2) + 'px'; // Read (triggers layout)

var h2 = element2.clientHeight; // Write (invalidates layout)

element2.style.height = (h2 * 2) + 'px'; // Read (triggers layout)

var h3 = element3.clientHeight; 

// Write (invalidates layout)

element3.style.height = (h3 * 2) + 'px'; 

  • Batch geometry reads from the DOM and modification of the DOM and avoid interleaving reads and writes. However, a better solution is to use CSS3 transition and animation to animate elements of the user interface. 

 

  • Using CSS3 transition and animation gives the browser information on how the element is being animated. This allows it to use hardware resources when available to maximise performance. 

Note: Animating using JavaScript uses the main thread, using CSS allows the work to be off- loaded to the compositor thread 

 

  • In situations where the only option is to drive the animation directly from JavaScript, batch all modifications to the DOM within one callback from requestAnimationFrame. 

The requestAnimationFrame function allows a function to be called at the next vertical sync. This allows changes to the DOM to be handled in one place, once per frame. 

 

window.requestAnimationFrame = window.requestAnimationFrame ||

function(fn){ window.setTimeout(fn, 20); }

FONT RENDERING

  • “display:none” is set on all text elements that are no visible on screen. 

    Becareful about text reflowing

The browser will divide the page in to render layers and produces paint buffers for each layer. On platforms with a GPU, there will be one or more composition layers that are linked to graphics textures in the GPU. 

 

  • A common technique to cause a composition layer to be created is to add a zero 3D transform to a div. 

 

page13image30512

 

-webkit-transform: translate3d(0,0,0) 

At the time of writing, the follow rules apply to WebKit’s decision logic for choosing render layers:

  •   The element is an SVG root (<svg>).

  •   The element is a text or search <input> field.

    or:

  •   The element does not have a percentage height value.

  •   The element does not have an implicit or auto height value.

  •   The element does not have an implicit or auto width value.

  •   The element has an explicit overflow value (scroll, auto or hidden).

  •   The element is not a descendant of a <table> element.

  •   The element is not set to display inline or inline-block 

  • If you do transition fade out... then when zero set display to none