Performance (Browser)

How browsers work?

● Rendering Engine (Webkit, Blink, Gecko)

● Javascript Engine (Nitro, V8, *monkey)

● Networking

● Persistence

Browser flow

● From hitting a URL to the usable web page

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Loading Content

● HTTP Request

● DNS lookup, Data fetching, Server side

processing

● HTTP Response

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Parsing HTML

● HTML is a serialized tree

● Grammatical parsing based

on doctype(DTD) or quirks

● Loading external files (JS,

CSS, Images)

● Creates content tree

● Done on adding HTML

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-3.xhtml

Computing Style

● CSS selector matching

● Computed Stylesheet

● CSS parser

● Computes style for each

node

● Cascaded (Browser native

style, external, inline)

● Done on adding Styles

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-8.xhtml

Construct Frames

● Create render tree

● Elements in render tree are

called frames or render

objects

● Tree has only displaying

elements

● Not one to one mapped to

content tree

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-6.xhtml

Layout (Reflow)

● Laying out the elements using content tree, render

tree, computed styles

● Where to position the element wrt to the other

elements and how much space it will take

● Done when style or html changes lead to layout

changes

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Paint (Repaint)

● Paints the layout on to the viewport using 2D

rendering api

● Tells GPU how to render the document

● Modern browsers use compositing and hardware

acceleration of GPU to provide faster paint cycles

● Done when layout, or styles changes and even on

scroll.

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Optimizations

The way we write code can be used to optimize each step the browser takes to build a webpage and render it to user

Loading Content (Optimization)

● Minify scripts and CSS, make sprite images

● GZIP data from server

● Serve static content from cookieless domains, use

multiple domains for serving static content

● Reduce network round trips(Combine script,css,

images), Redirects

● Utilise browser caching to the max

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Parse HTML (Optimization)

● Resources are loaded as the HTML is parsed

● Scripts are blocking in older browsers. (no document.

write)

● FOUC (Flash of unstyled content),no @import

● Use an optimized approach of having basic scripts to

show some state in the top of the page and rest of the

scripts (majority) at the bottom

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Computing Style(Optimization)

● Specificity of selectors

● Parsed from right for each

node

● No inline styles

● Club dynamic style

changes into one (using a

className)

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-8.xhtml

Construct Frames (Optimization)

● Frames are created only for visible items

● Visibility vs Display property

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Layout(Optimization)

● Every time layout changes reflow is done.

● Can get really expensive because any change in any

element can result in complete reflow of the page.

● Avoid as much DOM manipulation as possible

● Club all DOM insertion into a single object

(DocumentFragment) and insert into dom once.

● DOM reflow happens even on querying layout properties

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Paint(Optimization)

● Minimise repaint in a page as much as possible

● Avoid changes while scrolling

● Try to use new CSS transform and animate rather than

modifying the elements top/left properties (Avoid jquery

animations as they cause both reflow and repaint)

● Don't over do optimization by trying to dispose of items

outside the viewport (Maybe faster in older browsers but can

make scrolling in most modern browsers slow)

Parse HTML

Compute Style

Construct Frames Layout Paint

Load Content

Javascript OptimizationScoping

● Scope variables and functions properly. Avoid using the global

namespace (use var statement)

● Global variables are the deepest in the scope chain

● with and try,catch add a level to scope chain

● Closure also add to a level in scope chain

Execution Context

Scope

Scope Chain

0

1

Activation object

this window

arguments []

variables undefined

Global

document (object)

window (object)

Javascript OptimizationData Access

● Local variables and literals fastest

● Global variables are the deepest in the scope chain

● Accessing properties of objects and elements of array is more

expensive

● If a property is accessed in a loop more than once store it in a local

variable

Loops

● Avoid for each, for in, and other function based iterators as they

access all properties of the array object not just the elements

Demo

● http://codepen.io/paulirish/pen/nkwKs vs

http://codepen.io/paulirish/pen/LsxyF

● Repaint demo : http://175.41.136.68:8090

Tools

● Chrome Dev Tools

● Pagespeed

● Yslow

● Fiddler

References

● How browsers work http://taligarsiel.

com/Projects/howbrowserswork1.htm

● Speed up Your Javascript : http://youtu.

be/mHtdZgou0qU

● Faster HTML and CSS: Layout Engine Internals for

Web Developers http://youtu.

be/a2_6bGNZ7bA