Porównanie funkcji querySelector, getElementById i getElementsByClassName
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.
ŁukaszPodziel się artykułem:
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.
