Lepsza praktyka w aplikacji internetowej HTML5: za pomocą metody getElementByID lub przechowywanie odwołania?

Question

Buduję jedną z moich pierwszych aplikacji internetowych przy użyciu HTML5, specjalnie na iPhone'y.

Ponieważ jestem całkiem nowy w tym, staram się wypracować dobre nawyki dotyczące kodowania, stosować najlepsze praktyki, optymalizować wydajność i minimalizować obciążenie iPhone'a o ograniczonych zasobach.

Jedną z rzeczy, które muszę robić często ... Mam wiele elementów div (z których każdy ma unikalny identyfikator), które często aktualizuję (np. Z innerHTML) lub modyfikuję (np. Atrybuty stylu z przechodzenie i transformacja webkita).

Ogólnie - czy lepiej używać getElementByID za każdym razem, gdy potrzebuję uchwyt do elementu div, czy też powinienem przechowywać odwołania do każdego div, do którego uzyskuję dostęp w zmiennych "globalnych" na początku?

(Używam "global" w cudzysłowach, ponieważ tak naprawdę mam jedną prawdziwie globalną zmienną - jest to obiekt, który przechowuje wszystkie moje "globalne" zmienne jako właściwości).

Zakładam, że użycie getElementByID za każdym razem musi mieć trochę narzut, ponieważ funkcja musi przejść przez DOM, aby znaleźć div. Ale nie jestem pewien, jak działa ta funkcja.

Używanie zmiennych globalnych do przechowywania uchwytów do każdego elementu musi zużywać trochę pamięci, ale nie wiem, czy te odwołania wymagają tylko trywialnej ilości pamięci RAM lub więcej.

A więc - co jest lepsze? Albo, czy obie opcje zużywają tak trywialną ilość zasobów, o które powinienem się martwić, co daje bardziej czytelny, możliwy do utrzymania kod?

Wielkie dzięki z góry!

Answer 1

„Ogólnie rzecz biorąc - jestem lepiej wyłączyć za pomocą getElementById każdym razem muszę uchwyt do div, albo należy przechowywać odnośniki do każdego div”

Kiedy dzwonisz getElementById, prosisz go o wykonanie zadania. Jeśli nie spodziewasz się innego wyniku, wywołując tę ​​samą metodę z tym samym argumentem, wydaje się, że ma to sens, aby buforować wynik.

„Przypuszczam, używając getElementById za każdym razem musi mieć jakieś obciążenie, ponieważ funkcja musi przechodzić DOM znaleźć div. Ale nie jestem pewien, w jaki sposób opodatkowania lub wydajny funkcja ta jest”.

Szczególnie w nowoczesnych przeglądarkach jest bardzo szybki, ale nie tak szybki, jak wyszukiwanie właściwości na obiekcie globalnym.

„Używanie zmiennych globalnych do sklepu uchwyty do każdego elementu należy spożywać trochę pamięci, ale nie wiem, czy te odniesienia wymagają tylko trywialny ilość pamięci RAM lub więcej.”

Trivial. To tylko wskaźnik do obiektu, który już istnieje. Jeśli usuniesz element z DOM bez zamiaru ponownego użycia go, to oczywiście będziesz chciał go wstrzymać.

„Więc - co jest lepsze Albo, czy obie opcje spożywać takie trywialne ilości zasobów, że należy po prostu martwić która produkuje bardziej czytelny, utrzymaniu kod?”

Zależy całkowicie od sytuacji. Jeśli robisz to tylko kilka razy, możesz nie uznać, że warto go dodać do globalnego obiektu. Im więcej potrzebujesz do pobrania tego samego elementu, tym większy sens ma jego buforowanie.

---

Here's a jsPerf test w celu porównania. Oczywiście rozmiar twojego DOM, jak również długość zakresu zmiennego zakresu i liczba/głębokość właściwości w twoim obiekcie globalnym będą odgrywać pewną rolę.

Answer 2

Używanie zmiennej lokalnej lub nawet właściwości obiektu jest znacznie szybsze niż getElementById(). Obie są jednak tak szybkie, że ich wydajność jest ogólnie nieistotna w porównaniu z każdą inną operacją, którą można wykonać po uzyskaniu elementu. Zdarzenie ustawiające pojedynczą właściwość na elemencie jest wolniejsze od woluminu niż pobieranie przez dowolną metodę.

Tak więc głównym powodem buforować element jest uniknięcie dość rozwlekły document.getElementById (... składnię, lub aby uniknąć konieczności ciągi id elementu rozrzuconych po całym kodzie.