Лучшая практика для веб-приложения HTML5: использовать getElementByID или хранить ссылку?

Question

Я создаю одно из моих первых веб-приложений с использованием HTML5, специально предназначенных для iPhone.

Поскольку я довольно новичок в этом, я пытаюсь развить некоторые хорошие привычки кодирования, следуйте лучшим рекомендациям,оптимизировать производительность и минимизировать нагрузку на iPhone с ограниченными ресурсами.

Одна из вещей, которые мне нужно делать часто ... У меня есть множество div (каждый из которых имеет уникальный идентификатор), которые я частообновление (например, с помощью innerHTML) или изменение (например, атрибуты стиля с переходами и преобразованиями webkit).

В целом - лучше ли мне использовать getElementByID каждый раз, когда мне нужен дескриптор div, или я долженхранить ссылки на каждый div, к которому я обращаюсь, в «глобальных» переменных с самого начала?

(я использую «global» в кавычках, потому что у меня действительно только одна действительно global переменная - этообъект, который хранит все мои «глобальные» переменные как свойства).

Я предполагаю, что использование getElementByID каждый раз должно иметь некоторые издержки, так как функция должна проходить через DOMнайти див.Но я не уверен, насколько эффективна и эффективна эта функция.

Использование глобальных переменных для хранения дескрипторов каждого элемента должно занимать некоторое количество памяти, но я не знаю, требуют ли эти ссылки только тривиального объемаОЗУ или больше.

Итак - что лучше?Или же оба варианта потребляют такое тривиальное количество ресурсов, о которых мне следует просто беспокоиться, что приводит к созданию более читабельного, обслуживаемого кода?

Заранее большое спасибо!

Answer 1

"В общем - лучше ли мне использовать getElementByID каждый раз, когда мне нужен дескриптор для div, или я должен хранить ссылки на каждый div"

Когда вы звоните getElementById, вы просите его выполнить задачу.Если вы не ожидаете другого результата при вызове одного и того же метода с одним и тем же аргументом, то, похоже, имеет смысл кэшировать результат.

"Я предполагаю, что каждый раз использую getElementByIDдолжен иметь некоторые издержки, так как функция должна проходить через DOM, чтобы найти div. Но я не уверен, насколько она эффективна и обременительна. "

В современных браузерах особенно, это очень быстро, но не так быстро, как поиск свойства вашего глобального объекта.

«Использование глобальных переменных для хранения дескрипторов каждого элемента должно занимать некоторое количество памяти, но я неНе знаю, требуют ли эти ссылки просто тривиального объема ОЗУ или больше. "

Trivial.Это просто указатель на объект, который уже существует.Если вы удалите элемент из DOM без намерения использовать его снова, то, конечно, вы захотите освободить его.

"Итак - что лучше? ИлиНеужели оба варианта потребляют такое тривиальное количество ресурсов, о котором я должен просто беспокоиться, что создает более читабельный, обслуживаемый код? "

Полностью зависит от ситуации.Если вы загружаете его только пару раз, возможно, вам не стоит добавлять его в глобальный объект.Чем больше вам нужно извлечь тот же элемент, тем больше смысла его кэшировать.

---

Вот для сравнения jsPerf .Конечно, размер вашей DOM, а также длина обхода переменной области и количество / глубина свойств в вашем глобальном объекте будут играть определенную роль.

Answer 2

Использование локальной переменной или даже свойства объекта намного быстрее, чем getElementById (). Тем не менее, оба они настолько быстры, что их производительность, как правило, не имеет значения по сравнению с любой другой операцией, которую вы можете выполнить, когда получите элемент. Событие, устанавливающее единственное свойство для элемента, на несколько порядков медленнее, чем его извлечение любым из методов.

Таким образом, основная причина кеширования элемента состоит в том, чтобы избежать довольно длинного синтаксиса document.getElementById (... или избежать разбросания строк идентификатора элемента по всему коду.