Embed Size (px)
Citation preview
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
