High performance Web apps with 

Agenda

• The rendering process
• Batch DOM changes
• Minimizing DOM access
• Reducing DOM elements
• Minimizing HTTP Requests
• Other tips

The rendering process

The rendering process

Painting process

Reflow & Repaint

A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout.

A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page).

https://csstriggers.com

http://pixeln3rd.github.io/cssreflow/

Batch DOM changes

This code will prompts browser to re-render 5 times

jQuery('#dialog-window')
.width(600)
.height(400)
.css('position':'absolute')
.css('top', '200px')
.css('left', '200px');

Batch DOM changes

Suggest to refactor as below

.your-style {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 200px;
    left: 200px;
}

jQuery('#dialog-window')
.addClass('your-style');

Minimizing DOM access

• Cache references to accessed elements
• Update nodes "offline" and then add them to the tree
• Avoid fixing layout with JavaScript

Reducing DOM elements

document.getElementsByTagName('*').length

Yahoo homepage has 700 elements

Test your heavy dom

https://vn.yahoo.com/?p=us

Reducing DOM elements

Case studies

Airbnb Infinity

Clusterize.js

Minimizing HTTP Requests

Minification and concatenation

Text

https://www.npmjs.com/package/gulp-concat

CSS Sprites

background-image
background-position

Other tips

Text

Using CDN

Gzip Components

Accept-Encoding: gzip, deflate
Content-Encoding: gzip

Put Stylesheets at the top

Put Scripts at the bottom

References

• http://taligarsiel.com/Projects/howbrowserswork1.htm

• http://desalasworks.com/article/javascript-performance-techniques/

• https://developer.yahoo.com/performance/rules.html