Действительно ли я должен кэшировать document.getElementById () в переменной или назвать его каждый раз?
У меня есть много элементов, которые сгенерированы и сосланы (наведение мыши, щелчки, изменения положения) много времен.
У меня есть идентификатор тех элементов под рукой. Действительно ли мудро сохранить 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')]
4 ответа
Вы, конечно, должны повторно использовать ссылку там, где это возможно, но, возможно, вам понадобится новая ссылка в каждом теле функции.
Пример:
var e1 = document.getElementById('id1');
e1.innerHTML = 'test';
e1.className = 'info';
Если вы будете хранить ссылки дольше, то, возможно, они перестанут работать. Если вы, например, получите внутренний HTML для части страницы и сохраните его обратно, все элементы в этой части будут удалены и воссозданы. Если у вас была ссылка на один из элементов в этой части, то этого элемента больше не существует.
// This will recreate all elements inside the 'parent' element:
document.getElementById('parent').innerHTML += 'test';
, безусловно, быстрее хранить элементы в переменной, но не на большую маржу. Это то, что отличается от случая в футляре и должно быть адаптировано для каждого по отдельности.
Может быть, самый большой фактор - это разборчивость, я считаю, что доступ к элементам напрямую более читабелен.
theMainButton.style.color = "red";
// vs.
document.getElementById("theMainButton").style.color = "red";
GETELEMANTYBYID Возвращает узел элемента, который по существу просто объектом JavaScript. Вы можете назначить этот объект для переменной, что означает, что переменная укажет этот объект всякий раз, когда вы вводите эту переменную на более позднем этапе. Так,
var id1 = document.getElementById('id1');
ID1 теперь относится к элементу DOM с идентификатором ID1 . Если ни один элемент не был найден с этим ID , то Document.getelementById возвращает NULL.
Если элементы остаются в 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');
На этот вопрос нет однозначного правильного ответа. Все зависит от того, с чем вам придется работать. Если вы работаете со страницей, содержащей огромное количество элементов в дереве 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 и передавая ему ID элемента. Когда вам нужно получить значение, вы вызываете get_element id, который вы передали, и при первом же запуске он будет искать элемент и кэшировать его, при каждом последующем вызове он будет просто возвращать кэшированное значение.