Jacob Hansson Optimerad Javascript
 
 
Optimerad Javascript
vs Faktisk hastighet uppfattad hastighet
och nä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  lo calVar=12; return   eval (first);} minification:
2.  Trimma nätverkstid function  add (first,second){ var  lo calVar=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 =  $ ( &quot;<ul></ul>&quot; ); $ ( &quot;#mydiv&quot; ). append (ul); while ( count-- ) { ul. append ( &quot;<li></li>&quot; ); }
3.  Trimma körtid var  ul =  $ ( &quot;<ul></ul>&quot; ); while ( count-- ) { ul. append ( &quot;<li></li>&quot; ); } $ ( &quot;#mydiv&quot; ). 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 [email_address]

Optimera JS

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
    vs Faktisk hastighetuppfattad hastighet
  • 6.
  • 7.
    1. 2.3. 4. Trimma nätverkstid Trimma körtid Automatisera (10 min) (10 min) (5 min) Mäta hastighet (5 min)
  • 8.
    1. Mätahastighet
  • 9.
    1. Mätahastighet Firebug
  • 10.
    1. Mätahastighet Firebug
  • 11.
    1. Mätahastighet Speed Tracer
  • 12.
    1. 2.3. 4. Trimma nätverkstid Trimma körtid Automatisera (10 min) (10 min) (5 min) Mäta hastighet (5 min)
  • 13.
    2. Trimmanätverkstid Minska datamängden Färre requests Hämta i bakgrunden
  • 14.
    2. Trimmanätverkstid function add (first, second) { var localVar = 12; return first + second; }
  • 15.
    2. Trimmanätverkstid function add (first, second) { var localVar = 12; return first + second; } function add (a,b){ return a+b;} minification:
  • 16.
    2. Trimmanätverkstid function add (first, second) { var localVar = 12; return eval (first); }
  • 17.
    2. Trimmanätverkstid function add (first, second) { var localVar = 12; return eval (first); } function add (first,second){ var lo calVar=12; return eval (first);} minification:
  • 18.
    2. Trimmanätverkstid function add (first,second){ var lo calVar=12; return eval (first);} function add (a,b){ return a+b;}
  • 19.
    2. Trimmanätverkstid Samla AJAX-anrop
  • 20.
    2. Trimmanätverkstid Code-splitting
  • 21.
    2. Trimmanätverkstid load ( “my.code” ,function() { my.code. foo (); });
  • 22.
    1. 2.3. 4. Trimma nätverkstid Trimma körtid Automatisera (10 min) (10 min) (5 min) Mäta hastighet (5 min)
  • 23.
    3. Trimmakörtid UI-tråden Snabbare DOM
  • 24.
    3. Trimmakörtid 50 ms
  • 25.
    3. Trimmakörtid JS -> DOM
  • 26.
    3. Trimmakörtid JS -> DOM
  • 27.
    3. Trimmakörtid var ul = $ ( &quot;<ul></ul>&quot; ); $ ( &quot;#mydiv&quot; ). append (ul); while ( count-- ) { ul. append ( &quot;<li></li>&quot; ); }
  • 28.
    3. Trimmakörtid var ul = $ ( &quot;<ul></ul>&quot; ); while ( count-- ) { ul. append ( &quot;<li></li>&quot; ); } $ ( &quot;#mydiv&quot; ). append (ul);
  • 29.
    1. 2.3. 4. Trimma nätverkstid Trimma körtid Automatisera (10 min) (10 min) (5 min) Mäta hastighet (5 min)
  • 30.
    4. AutomatiseraBuild-tools
  • 31.
    4. AutomatiseraQUnit och JSLitmus
  • 32.
    4. AutomatiseraTesta i alla webbläsare
  • 33.