Должен ли я кешировать document.getElementById () в переменной или вызывать его каждый раз?

Question

У меня много элементов, которые генерируются и на которые ссылаются (при наведении мыши, щелчках, изменении положения) много раз.

У меня есть ID этих элементов под рукой. Целесообразно ли хранить вызовы document.getElementById(ID) в переменной или же быстрее / столь же быстро / медленнее вызывать document.getElementById() каждый раз?

var app = [];
var app.elements = []; 
//i can store ['id1', 'id2', 'id3']
//OR ['id1' => document.getElementById('id1'), 'id2' => document.getElementById('id2'), 'id3' => document.getElementById('id3')]

Answer 1

Вы, конечно, должны повторно использовать ссылку, где это возможно, но вам может потребоваться получить новую ссылку в каждом теле функции.

Пример:

var e1 = document.getElementById('id1');
e1.innerHTML = 'test';
e1.className = 'info';

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

// This will recreate all elements inside the 'parent' element:
document.getElementById('parent').innerHTML += 'test';

Answer 2

На этот вопрос нет однозначного правильного ответа. Все зависит от того, с чем вам придется работать. Если вы работаете со страницей, имеющей огромное количество элементов в дереве DOM, лучше кэшировать ссылки и использовать их повторно, чтобы ускорить поиск. Если вы работаете на маленькой странице, лучше искать элементы на лету и минимизировать потребление памяти браузером.

Это также зависит от браузеров, на которые вы ориентируетесь. Например, более новым версиям Firefox требуется время для точной очистки элемента в первый раз, но они кэшируют ссылку внутри, поэтому в следующий раз, когда вы собираетесь ее искать, это будет почти мгновенно. IE, с другой стороны, не кэширует значения поиска, но время поиска намного быстрее, чем Firefox с первой попытки.

Многие современные фреймворки будут кэшировать элементы, которые вы нашли для вас. Однако я лично все еще предпочитаю использовать document.getElementById большую часть времени. Что мне делать, когда мне нужно кэшировать значения поиска, это следующее:

 function registerElement(id)
 {
     if (!this["get_" + id])
        this["get_" + id] = function() {
            var element = document.getElementById(id);
            this["get_" + id] = function() {return element;};
            return element;
        }
 }

Вы используете это, вызывая registerElement и передавая ему идентификатор элемента. Когда вам нужно получить значение, вы вызываете переданный вами get_element id, и при первом запуске он ищет элемент и кэширует его, при каждом последующем вызове он просто возвращает кэшированное значение.

Answer 3

getElementById возвращает узел элемента, который по сути является просто объектом JavaScript. Вы можете присвоить этот объект переменной, то есть переменная будет указывать на этот объект всякий раз, когда вы вводите эту переменную на более позднем этапе. Таким образом,

var id1 = document.getElementById('id1');

id1 теперь относится к элементу DOM с id, равным id1. Если с этим id элемент не найден, то document.getElementById возвращает ноль.

Если элементы остаются в DOM и не заменяются, то имеет смысл хранить их в массиве, чтобы вы могли ссылаться на них столько раз, сколько захотите, без каких-либо затрат на производительность.

Если это поможет, вы можете создать простую функцию, которая сделает это за вас:

function getElementsByIds( /* id1, id2 ... */ ) {

    var elems = [];

    for (var i = 0, l = arguments.length; i < l; i++) {
        elems[i] = document.getElementById(arguments[i]);
    }

    return elems;

}

app.elements = getElementsByIds('id1', 'id2', 'id3');

Answer 4

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

Возможно, самым важным фактором является удобочитаемость, я считаю, что прямой доступ к элементам более удобочитаем.

theMainButton.style.color = "red";
// vs.
document.getElementById("theMainButton").style.color = "red";