Jacob Hansson

Optimerad Javascript

Optimerad Javascript

vsFaktisk hastighet

uppfattad hastighet

ochnätverkstid

körtid

1. 2.3.4.

Trimma nätverkstid

Trimma körtid

Automatisera

(10 min)

(10 min)

(5 min)

Mäta hastighet (5 min)

1. Mäta hastighet

1. Mäta hastighet Firebug

1. Mäta hastighet Firebug

1. Mäta hastighet Speed Tracer

1. 2.3.4.

Trimma nätverkstid

Trimma körtid

Automatisera

(10 min)

(10 min)

(5 min)

Mäta hastighet (5 min)

2. Trimma nätverkstid

Minska datamängden

Färre requests

Hämta i bakgrunden

2. Trimma nätverkstid

function add(first, second) { var localVar = 12; return first + second;}

2. Trimma nätverkstid

function add(first, second) { var localVar = 12; return first + second;}

function add(a,b){return a+b;}

minification:

2. Trimma nätverkstid

function add(first, second) { var localVar = 12; return eval(first);}

2. Trimma nätverkstid

function add(first, second) { var localVar = 12; return eval(first);}

function add(first,second){var localVar=12;return eval(first);}

minification:

2. Trimma nätverkstid

function add(first,second){var localVar=12;return eval(first);}

function add(a,b){return a+b;}

2. Trimma nätverkstid

Samla AJAX-anrop

2. Trimma nätverkstid

Code-splitting

2. Trimma nätverkstid

load(“my.code”,function() { my.code.foo();});

1. 2.3.4.

Trimma nätverkstid

Trimma körtid

Automatisera

(10 min)

(10 min)

(5 min)

Mäta hastighet (5 min)

3. Trimma körtid

UI-tråden

Snabbare DOM

3. Trimma körtid

50 ms

3. Trimma körtid

JS -> DOM

3. Trimma körtid

JS -> DOM

3. Trimma körtid

var ul = $("<ul></ul>");

$("#mydiv").append(ul);

while ( count-- ) {

ul.append("<li></li>");

}

3. Trimma körtid

var ul = $("<ul></ul>");

while ( count-- ) {

ul.append("<li></li>");

}

$("#mydiv").append(ul);

1. 2.3.4.

Trimma nätverkstid

Trimma körtid

Automatisera

(10 min)

(10 min)

(5 min)

Mäta hastighet (5 min)

4. Automatisera

Build-tools

4. Automatisera

QUnit och JSLitmus

4. Automatisera

Testa i alla webbläsare

@jakewins

jacob@voltvoodoo.com