Get to know the browser better and write faster web apps

© 2013 SAP Portals. All rights reserved. 1

Lior Bar-On, Senior Development Architect @ SAP

Sept. 2013 Public


About Me

/http://www.softwarearchiblog.com(: בעברית)הבלוג שלי

http://www.linkedin.com/in/liorbo

http://www.softwarearchiblog.com/

http://www.linkedin.com/in/liorbo


Agenda

The Server

The Network

The Browser


The Network

The NetworkThe Server The Browser


A Web App that loads is a Miracle!

Load HTML file

DNS lookup

Establish TCP Conn. (3-way handshake)

HTTP request @Cold Connection

HTML Parsing starts

<script> tag => “Stop The World”

ForEach Script file:

(Optional) DNS lookup

(Optional) 3-way handshake + TLS handshake (“4-way”)

(Optional) http request over a (cold) connection

Continue HTML parsing….

t


TCP Congestion Control: Slow Start (sending 20KB of data)

Cold Connection Warn Connection

Segment = 1460 bytes

Header = 40 bytes


An “Underwater Cable” won’t save ya!


How Does it works?

Hardware improves all the time

CPU / Memory

Network

Browsers Optimizations

Client-Side Cache

Keep Alive

DNS pre-fetch

TCO pre-connect

Network Optimizations: Content Delivery Networks (CDNs)

Developers can do much more!


Main Pain Point of Modern Networks: Latency

“average” latency is typically ~200ms, +200ms for 3G access

source

http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/


Tactics dealing with the Network

Reduce the number of Roundtrips

Lazy Loading

Caching

Domain Sharding

Unification

Minification


Tactic: Reduce number of Roundtrips / redirects

Latency is paid for each roundtrip done.

Eliminate (e.g. 404s, resources not being used)

Unify (later)

Lazy-Load (later)

Redirects require a new HTTP request cycle

Redirect = a significant waste

e.g. redirect to “m.mysite.com”

source: http archive

http://httparchive.org/interesting.php


Tactic: Lazy Loading

Load resources (scripts, ajax calls, (images)) only when they are needed.

Dynamic JavaScript loading libraries:

LABjs

require.js

Lsjs

ControlJS

Manually: $('head').append( ... );


Tactic: Caching

Distinguish between “Cachable” vs. “Non-Cachable” HTTP Methods:

Some Methods (GET, HEAD) will be cached by the “network”

Unsafe Methods (POST, PUT, DELETE, OPTIONS) will not be cached by the “network”

Use appropriate HTTP headers to define a proper caching policy

Such as:

Cache-control / expires

If-Modified

ETags

POST method can become cachable with proper headers, at least in theory


Domain Sharding

Distribute resources over multiple hostname to increase connection parallelism

Effectiveness is nowadays questionable (argument for, argument against)

Even if you do:

Only on domains proven to require many files

Shard no more than once

A new method rising: “Domain UnSharding”:

Assembling large, unique resources to a single host

can enjoy “connections warm-up”.

Images, fonts and niche JavaScript libraries

- are a good candidates

example.com = 1.1.1.1

img.example.com = 1.1.1.1

DNS

Browser

consult

6 x example.com

6 x img.example.com

Overall: 12 connections!

<< 1.1.1.1 >>

Server

connections:

https://insouciant.org/tech/network-congestion-and-web-browsing/

http://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited


Tactic: Unification

Working with small source files is a good programming practice.

So - crunch JavaScript and CSS files

Yahoo’s YUI Compressor

Google Closure Compiler

CSSO (for CSS files)

etc.

source: http archive

http://httparchive.org/interesting.php


Tactic: Unification (2)

Sprites

Create 1 image to replace many

Not just for image files (e.g. howler.js)

Data URIs

Note: DataURI increase resource size by 37%

http://en.wikipedia.org/wiki/Base64




Tactic: Minification

JavaScript Minification tools can reduce 50%-90% of the file’s size

Being compressed into:


Tactic: Minification(2)

CSS minification tools can reduce 30%-50% of the file’s size

Optimize images size and compression - can save much size.

Enabling GZIP compression on textual files (even if minified) can save you some network bytes.

Bitmap

Vector SVG

JPG

compression?

PNG

Bit depth?Lossy PNG

?

??

Bitmap

reduce size?

?

?


Real Life Experience


WebPageTest: Results


WebPageTest: Some Data provided


WebPageTest: Connection View


Inbound Alternative: Chrome Dev Tools


The Browser

The NetworkThe Server The Browser


The Web Browser

source: statcounter

http://gs.statcounter.com/?PHPSESSID=j2juf5bil673j4vrso39eijui6


The Browser Internals - engines

Browser Rendering Engine

Safari (iOS, win or Mac) Webkit

Chrome, Opera Blink (a recent fork of Webkit)

Firefox Gecko

Internet Explorer Trident

Internet Explorer for Mac Tasman

Browser JavaScript Engine ECMAScript 5.1

Support since

Safari (iOS, win or Mac) javaScriptCore (aka Nitro) SF5.1*

Chrome, Opera V8 Chrome13

Firefox SpiderMonkey JIT part called ionMoney (since

FF18)

FF4

Internet Explorer Chakra (since IE9) IE9*


Typical Browser HTML rendering flow

HTML fileDOM Tree

(aka content model)1: parse

Style Tree

(aka style ruleSet, CSSOM)CSS file 2: parse

2: loadRender Tree

(aka frame tree)

3: merge

3: merge

Canvas

5: render

Layout

4: layout /

re-flow

JavaScript file

2: update

2: update

2: load

6: draw

on screen

Source: d.baron

http://dbaron.org/talks/2012-04-22-mozcamp-latam/slide-8.xhtml


Problems that may occur with the Browser’s Rendering Model

“Stop the World” on initial page load

Doing Unnecessary work (“Layout trashing”, “Paint trashing”)

Single thread

The Browser is not well-known to developers


“Stop The World”

blocks other downloads (images in IE, iframes); scripts are loaded and executed serially; blocks rendering

during parse-execute


3 interaction milestones

0.1 second

is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special

feedback is necessary except to display the result.

1.0 second

is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the

delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second,

but the user does lose the feeling of operating directly on the data.

10 seconds

is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want

to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating

when the computer expects to be done. Feedback during the delay is especially important if the response

time is likely to be highly variable, since users will then not know what to expect.


Tactics dealing with the Browser

Postpone Script Execution

Add styles before DOM Elements

Be aware of DOM Tree’s Write Buffer

Offload work to other threads


Tactic: Postpone Script Execution

Either:

Move Script to the end of the file (after <body> tag)

Add Script Dynamically to <head> tag:

$('head').append( ... );

Use “async” and “defer” attributes <script src=“…” async></script>

Simply, use require.js / LABjs / etc.


Tactic: Add styles before DOM Elements

Inserting Style tree element is more expensive than inserting DOM element.

We also want nice visualization on the screen early (perceived performance)

Therefore:

Inside the <HEAD>, put all CSS files first.

Prefer jQuery’s data() over addClass()

Minimize use of CSSOM, e.g.: myStyle.insertRule(…)

DOM Tree

(aka content model)

Style Tree

(aka style ruleSet, CSSOM)

Render Tree

(aka frame tree)

3: merge

3: merge


2 Code Examples…

Which Example looks Much better for performance?


Tactic: Be aware of DOM Tree’s Write Buffer

A little theory:

Flush will happen:

At DOM read operation, e.g. element.height

Every 16.6ms (to achieve 60fps)

Style Tree DOM Tree

Render Tree

DOM API

Read (B)

Write Buffer

Read (A)

write

Flush changes

derived fromderived from


Tactic: Be aware of DOM Tree’s Write Buffer (2)

R/W/R/W/R/W/R/W/R/W = ~250ms

RRRRRRR/WWWWWW = ~20ms

source

http://kellegous.com/j/2013/01/26/layout-performance/

http://kellegous.com/j/2013/01/26/layout-performance/


Another example

Could be so much better as:


Tactic: offload work to other threads

Browser has a single thread that executes JavaScript (per browser tab)

When the thread is busy, the following is being blocked:

Event handling (e.g. Click, Resize)

setTimeout / setInterval

Possibly rendering

What can be done?

SetTimeout(myFunc, 0);

Use CSS Animations

transform: translateZ(0); read more

Use Web Workers for intensive calculations / network activity

Heap

Queue

Stack

Thread

Closure

Closure

Closure

Closure

Closure

Closure

Closure

Closure

Closure

Closure

global variables

Context

(“window” object)

public part

private part

pull

push

“document” object

(DOM)

http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/


Chrome Dev Tools’ Timeline is your best friend


Thank You

Lior Bar-On

[email protected]

(Hebrew) Blog: http://www.softwarearchiblog.com/

mailto:[email protected]

mailto:[email protected]




Technology

Get to know the browser better and write faster web apps