Мне кажется, это вопрос из двух частей:
Сокращение обхода цепи прицела
Одна из стратегий оптимизации, на которую вы ссылаетесь, - это присвоение локальной (функциональной) переменной. Обычно это делается для того, чтобы минимизировать объем цепочки областей действия, который необходимо пройти при доступе к этой переменной. Книга «Высокопроизводительный Javascript» ( PDF соответствующей главы ) хорошо описывает это.
Вдоль этих строк наложение псевдонима document на переменную уровня функции может привести к некоторому незначительному увеличению эффективности за счет сокращения цепочки областей действия. Однако это, возможно, микрооптимизация, и она не справится с основным потенциальным замедлением, о котором вы упоминаете, а именно с повторяющимися вызовами DOM в цикле.
Упрощение вызовов DOM
Для лучшей управляемости и эффективности кода вы должны исключить запросы к большому количеству элементов по идентификатору так, как вы это делаете (хотя получение элемента по идентификатору очень эффективно, повторные вызовы действительно складываются, и в этом случае возможно, сделать код менее понятным). Хороший способ сделать это - использовать jQuery или другую библиотеку с хорошей поддержкой селекторов. Использование библиотеки (в примере ниже предполагается, что jQuery) сократит объем кода, который вам нужно написать, при обработке различий между браузерами.
Подумайте, что общего у элементов, на которые вы ссылаетесь, и как запросить их как один набор. Хорошая стратегия состоит в том, чтобы назначать имена классов (в коде сервера, где вы в настоящее время устанавливаете идентификаторы элементов) для каждого из элементов, поясняя, к какому набору (-ам) принадлежит каждый. class="cell type_a set_4" установит классы для элемента, который в настоящее время имеет идентификатор "a4".
Затем получите полный набор элементов одновременно. Указание родительского элемента сделает вещи более эффективными:
var elements = $('#id_of_parent_element .cell')
После того, как вы получили элементы, вы можете затем отфильтровать список до нужных без дополнительных вызовов в DOM. Вот окончательный код цикла (обратите внимание, что он также гораздо менее многословен, чем получение всех этих по идентификатору):
var elements = $('#id_of_parent_element .cell'); // get the "cell" elements
for (z=0; z<10; z++){
var current_elements = elements.filter('.set_' + z); // filter to numbered set
if (index >= arrlen) {
current_elements.addClass('tldn');
} else if ( tldarr[index] == "n" || tldarr[index].length != 6) {
current_elements.innerHTML = img;
} else {
var tldstr = tldarr[index];
current_elements.each(function(index, element) {
$(this).addClass("tld" + tldstr.charAt(index));
});
}
}
Обратите внимание, что количество и время выполнения вызовов в DOM будут варьироваться в зависимости от браузера, поскольку jQuery пытается использовать собственные функции, такие как document.getElementsByClassName, где это возможно, при этом поддерживая более старые версии, у которых их не было. Но общий результат должен заключаться в меньшем количестве вызовов DOM, повышении предельной эффективности и уменьшении количества поддерживаемых строк кода.