Repozytorium Web Developera

JavaScript - podstawy, wydajność

Przydatne linki

Podstawy

Dobre praktyki

  • lepiej jest przypisać wybrany znacznik do zmiennej var, niż wyszukiwać w DOM ten sam element dwa razy; chyba, że wyszukujemy element tylko jeden raz, wtedy jest to mniej opłacalne; istotne również w przypadku this, np. wobec jQuery warto przypisać do zmiennej: var $this = $(this)
  • przed działaniem na jakimś elemencie DOM należy sprawdzić, czy on istnieje za pomocą Array.prototype.indexOf()
  • zawsze, gdy to tylko możliwe, warto używać selektorów z identyfikatorami elementów, ponieważ najszybszym sposobem pobrania elementu strony jest użycie selektora identyfikatora
  • należy stosować selektor identyfikatora na początku selektora elementów potomnych, np. w przypadku jQuery: $('#main a')
  • w przypadku jQuery warto korzystać z funkcji .find(), ponieważ jej zastosowanie jest dwukrotnie szybsze od wykorzystania selektora elementu podrzędnego, np. $('#main').find('a'), tyczy się to również podobnych funkcji jak np. .children()
  • należy unikać zbytniej szczegółowości, odwrotnie jak w przypadku CSS
  • należy unikać wielokrotnego wywoływania metody $(document).ready() - dobrym zwyczajem jest, aby była wywoływana tylko raz i nie odwoływała się do funkcji anonimowej
  • JavaScript nie umożliwania tworzenia modułów ani przestrzeni nazw - można jednak tworzyć obiekty, które będą takie zachowanie odwzorowywać, np. globalny obiekt myApp - a przy rozszerzaniu tej przestrzeni var myApp = myApp || {};

Przykład JSON

Przykład literału obiektowego.

        var person = {
            firstName : 'Robert',
            lastName : 'Kowalski'
        };
        

DOM a wydajność

Poniższy kod:

        var list = $("somelist");
        var parent = list.parent();

        for(var i = 0; i < 10000; i+= 1) {
            list.append("
  • Nowy element
  • "); }

    Jest około 6 razy mniej wydajny od poniższego, a wszystko to poprzez chwilowe odłączenie elementu z drzewa DOM. Wielokrotne zmiany w drzewie DOM należy optymalizować.

            var list = $("somelist");
            var parent = list.parent();
    
            list.detach(); //odłącza listę od drzewa DOM
    
            for(var i = 0; i < 10000; i+= 1) {
                list.append("
  • Nowy element
  • "); } parent.append(list); //dołącza listę do drzewa DOM //lub alternatywnie: var list = $("
      "); for(var i = 0; i < 10000; i+= 1) { list.append("
    • Nowy element
    • "); } list.appendTo($("listContainer"));