Wydajność przy użyciu JS querySelector

Question

Przy użyciu JavaScript w przeglądarce internetowej jest jakaś różnica wydajności pomiędzy:

Istniejące getElementById

document.getElementById("elem"); 

Selector zapytań za pomocą ID

document.querySelector("#elem"); 

Selector Query używanie [id = elem]

document.querySelector("[id=elem]"); 

Zakładam, że pierwszy będzie najszybszy (wystarczy wyszukać elementy z identyfikatorem). Również ostatnia wygląda na złą praktykę. Drugi z nich podobał mi się, ponieważ użycie querySelector na wszystko sprawia, że ​​kod jest łatwy do odczytania.

Wszelkie sugestie?

Answer 1

Po pierwsze,

document.querySelector("#elem"); 

ma przewagę w tym, że, w przeciwieństwie do document.getElementId, można go zwrócić klas. Jednak przydatność tego jest znacznie ograniczona przez fakt, że zwraca on tylko pierwszy obiekt o tej nazwie klasy, więc równie dobrze możesz użyć identyfikatora, jeśli nie szukasz konkretnego obiektu z tą nazwą klasy. jeśli używasz,

document.querySelectorAll 

Uważam jednak, (mogę się mylić), zwraca wszystkie elementy z tej nazwy klasy jako tablica, gdzie regularne querySelector jest odpowiednikiem querySelectorAll [0]. Dodatkową zaletą jest to, że można uruchamiać zapytania css3, co może być całkiem przydatne.

drugie,

document.getElementById("elem"); 

ma bardzo dobrą przewagę nad queryselector w tym sensie, że jest prawie 5 razy szybciej, więc jeśli siedzi tam z kilku tysięcy linii kodu i chcesz zoptymalizuj wspomniany kod, a następnie pobierz ExendById.

Wreszcie

document.querySelector("[id=elem]"); 

ja osobiście nie widzę potrzeby, aby korzystać z tego w każdej sytuacji. Jeśli potrzebujesz querySelector, dlaczego nie po prostu użyć #? Jest to dokładnie równoznaczne z pierwszym przykładem querySelector, jednak ma wiele bezużytecznych znaków.

Edycja: Dla uproszczenia, podsumowując, prawdopodobnie lepiej będzie użyć document.getElementById.

Answer 2

You can test it yourself. getElementById to najszybsza metoda

Answer 3

Czy jest jakaś różnica wydajności

Prawdopodobnie, ponieważ są one różne funkcje. querySelector co najmniej musi przeanalizować selektor, zanim wykryje, że jest równy getElementById. I wątpię, aby ta optymalizacja miała miejsce dla selektora atrybutów, nikt go nie używa. Więc podzielam twoje założenia; i tests confirm them (dzięki @Silver_Clash).

Osobiście nie podoba mi się ten drugi, ponieważ jest bardziej niejednoznaczny i okropny w użyciu z dynamicznymi wartościami id. Jawnie użycie getElementById jest po prostu bardziej zwięzłe.