Tworząc strony internetowe „od strony frontowej” zastanawialiście się kiedyś nad wydajnością waszych witryn? Otóż ma to duży wpływ na szybkość generowania strony, podobnie jak optymalny skrypt po stronie serwerowej. Wydajność dzisiejszych aplikacji webowych jest niezwykle istotna ze względu na ogromną popularność wszelkiej maści urządzeń mobilnych.

querySelector

document.querySelector("#element")

Pierwsza z funkcji zwraca pierwszy napotkany element w drzewie dokumentu zdefiniowany w grupie selektorów. Struktura dokumentu przeszukiwana jest metodą przejścia pre-order. Oznacza to szukanie hierarchiczne przechodząc kolejno po kodzie. W przypadku braku elementów pasujących do wzorca kompilator zwróci null. Niestety jest to metoda najmniej efektywna i zajmuje najwięcej czasu (w porównaniu do 3 badanych funkcji).

getElementsByClassName

document.getElementsByClassName("element")

Druga z funkcji getElementsByClassName zwraca tablicę wartości podrzędnych, zawierających zdefiniowane nazwy klas CSS. Również nie jest to funkcjia wydajna przy bardziej złożonych mechanizmach i aplikacjach, ze względu na brak unikalności elementów, po których przeszukujemy strukturę strony.

getElementById

document.getElementById("identyfikator")

Ostatnia z badanych funkcji to getElementById, która zwraca określony element o konkretnym identyfikatorze. Jest to najbardziej wydajna z metod do przeszukiwania struktury kodu strony. Swoją szybkość zawdzięcza unikalności identyfikatorów, po których odbywa się szukanie. W przypadku braku wyników zwracany jest null.

Porównanie szybkości i podsumowanie