Optymalizacja Javascript

Przy tworzeniu dość skomplikowanych aplikacji internetowych z dużą ilością javascriptu warto testować wydajność aplikacji. Głównie, gdy używamy jakiś frameworków javascriptowych nie mamy pewności, które metody są najszybsze. Warto testować wydajność kodu, który jest najczęściej używany w naszej aplikacji. W wielu przypadkach optymalizacja takich części kodu daje 2-4 krotne przyśpieszenie ich wykonywania.

W czym testować

Do testowania wydajności używamy np.: http://www.broofa.com/Tools/JSLitmus/ bardzo prosta biblioteka.

<script src="JSLitmus.js"></script>
<script>
JSLitmus.test('jQuery find', function() {
  $('div').find ('li');
});
JSLitmus.test('jQuery filter', function() {
  $('div').filter ('li');
});
</script>

Warto również przejrzeć test case na JSPerf.com.
W wielu przypadkach użycie metod DOM i czystego js jest o wiele szybsze i może być wzorcem do porównania i optymalizacji naszego kodu.

Warto sprawdzać co jest szybsze:

  1. jQuery .filter() zamiast .find() ale nie zawsze
    http://jsperf.com/find-vs-filter-vs-traverse,
  2. zamiast selectorów tagów .find ('li') warto użyć .getElementsByTagName('li'),
    http://jsperf.com/jquery-selector-vs-getelementsbytagname
  3. wolne .live(), lepiej użyć .delegate() lub własnej implementacji event delegation
    http://jsperf.com/jquery-click-event-test    ,
  4. nie używać skomplikowanych selectorów np.
    http://jsperf.com/has-vs-parent-2    ,
  5. czy szybsze jest znalezienie odpowiednich elementów i ich usuniecie? - nie,
    http://jsperf.com/hasclassremoveclass/2    ,
  6. szybkie tworzenie elementów w jQuery (nie .cloneNode() !) http://jsperf.com/createelement1/2,
  7. szybka metoda .round() na operatorach bitowych
    http://jsperf.com/vs-vs-parseint-bitwise-operators/2    ,
  8. arr.push() wolne w FF, Safari, IE ale nie w chromie - tu jest 2 razy szybsze niz w arr[arr.length] :),
  9. if (arr.length === 0) jest szybsze niż if (!arr.length)
    http://jsperf.com/negation-vs-length-equals-zero    .