Deprecated content

Left here for the record

Optymalizacja JS

Zbyszek Tenerowicz
meet.js 12.10.2011

Agenda

• Na szybko: dla początkujących - optymalizacja w jQuery
• Na szybko: DOM API
• Szybkość pure JS
• typedArray
• JIT, JIT hacking
• UI queue, runaway timer, czyli "aplikacja przestała odpowiadać"
• Testowanie wydajności

optymalizacja w jQuery

Znaj swoje selektory

$('.klasa');   $('#id .klasa');
$('div#id');  $('#id'); 
     $('ul>li'); //li w tym ul, ale żadne poniżej

• od prawej do lewej
• optymalizacja selektorów z #id
• nie wybieraj za dużo

optymalizacja w jQuery

Ceń swoje selektory

$('a.klasa').attr('src','http://html5rocks.com');
$('a.klasa').show(); 

//chaining
$('a.klasa').attr('src','http://html5rocks.com').show();

//zachowanie selektora na później
var $klasa=$('a.klasa');
$klasa.attr('src','http://html5rocks.com');
...
$klasa.show();

optymalizacja w jQuery

$(this) nie jest za darmo

$('whatever').click(function(){
	this.id="noweid"; //można tak!
	var $t=$(this); //keszuj $(this)
	$t.children().hide();
	$t.addClass('small');	
	});

.live() jest fajne.

.delegate() jest fajne.

.on() jest fajne.

DOM API

• Pamiętaj, że to API.
  (tu obowiązkowa metafora o moście)
• Nigdy nie modyfikuj DOM w pętli
• Klasa zamiast stylowania
• Węzły DOM poza dokumentem i
  DOM DocumentFragment
  (wait for it...)

DOM poza dokumentem - przykład

var node=document.createElement('div');
var p=document.createElement('p');
node.appendChild( p );
var tam=document.getELementById('#tu');
tam.insertBefore( node, tam.firstChild );

var p=$('<p>');
var div=$('<div>');
for(var i=0;i<100;i+=1){
	div.append(p);
}
div.prependTo($('#tu'));

DOM DocumentFragment - przykład

//pożyczone z http://ejohn.org/blog/dom-documentfragments/
//elems zawiera kilka węzłów DOM
var div = document.getElementsByTagName("div");

var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
  fragment.appendChild( elems[e] );
}

for ( var i = 0; i < div.length; i++ ) {
  div[i].appendChild( fragment.cloneNode(true) );
}

Wydajność składników języka

• a.push(x) > a[]=x > a[a.length]=x
• [].join() zamiast iterowania, gdy tylko się da
• rozwijanie pętli i przeliczanie długości
  http://jsperf.com/unrolledtest/5

  for(var i=0,l=dane.length;i<l;i+=10){
  dane[i];
  dane[i+1];
  ...						
  dane[i+9];
  }
  //tu jeszcze trzeba zrobić coś z resztką

• Przekraczanie scope kosztuje
  http://jsperf.com/scope-crossing

Niespodzianka

• Warto robić testy cross-browser
• Nie tylko, żeby odkryć, że IE jest najwolniejszy :) IE ma swoje mocne strony
• Przykład: Odczytanie body.innerHTML jest w IE nieporównywalnie szybsze niż w innych

typedArray - szybkie przetwarzanie danych

• Źródła do poczytania:
  http://hacks.mozilla.org/2010/08/fun-with-fast-javascript/
  http://www.khronos.org/registry/typedarray/specs/latest/
• Gwarantujemy przeglądarce typ danych

  var int8 = new Uint8Array(length);
  var int32 = new Uint32Array(length);
  var float32 = new Float32Array(length);
  var float64 = new Float64Array(length);

• Nie musicie mi wierzyć ;)
  http://jsperf.com/float32array/2
  http://jsperf.com/typed-array-iteration/13

JIT

• Method JIT
• Tracing JIT (FF only!)
• Deklarujesz czy nie, zmienna ma typ
  http://jsperf.com/variable-data-types/2

Abusing method JIT

A zaczęło się na Falsy Values...

• Hot or not - podgrzewanie funkcji
• Pinky, are you pondering what I'm pondering?

• function a(preheat){
  	if(preheat){return}
  	//heavy stuff
  	}
  for(var i=0;i<10000;i+=1){ a(true) }
  

• Czy opłaca się wyłączyć zawartość długiej pętli do osobnej metody?
• jsperf.com na wiele się tu nie zda.
• Ciąg dalszy nastąpi...

UI queue, runaway timer

• UI queue - zadania dla jednego wątku
• Świetny talk od ludzi z Yahoo (nie to co moje takietam)
• Runaway timer - ten javascript jest dla cierpliwych
• Duża praca w małych porcjach, czyli tniemy iterację na kawałki

  function aaa(){
  	zrobKawalek();
  	setTimeout(aaa,0); //no ale zero, nie?
  	}

• No właśnie nie zero
• WebWorkers, ale to zupełnie inna historia

Jak testować

• jsperf.com
• Dlaczego [jeszcze] nie umiesz tego zrobić sam:
  accuracy-of-javascript-time by John R.
  ziarnistość czasu w przeglądarce (mniej problematyczna dla UNIX/LINUX)
• Navigation timing - Tutorial

  window.performance={
  	"memory":{"totalJSHeapSize":0,"usedJSHeapSize":0,"jsHeapSizeLimit":0},
  	"timing":{
  		"connectStart":1318196180004,
  		"responseStart":1318196180108,
  		"domLoading":1318196180119,
  		"connectEnd":1318196180004,
  		"domInteractive":1318196180758,
  		"fetchStart":1318196180000,
  		"secureConnectionStart":0,
  		"domainLookupStart":1318196180000,
  		"responseEnd":1318196180420,
  		"requestStart":1318196180005,
  		"loadEventEnd":1318196181001,
  		"domComplete":1318196181000,
  		"redirectStart":0,
  		"unloadEventEnd":0,
  		"domContentLoadedEventStart":1318196180758,
  		"domContentLoadedEventEnd":1318196180758,
  		"domainLookupEnd":1318196180000,
  		"navigationStart":1318196180000,
  		"unloadEventStart":0,
  		"loadEventStart":1318196181001,
  		"redirectEnd":0
  		},
  	"navigation":{"redirectCount":0,"type":0}
  }

Pobudka, to już koniec!