Доступ к элементам DOM поступает за счет, а изменение элементов DOM еще дороже, поскольку он заставляет браузер пересчитать геометрические изменения страницы.
Конечно, наихудший случай - доступ к модифицированному элементу в цикле, особенно в операциях с циклами для коллекций элементов HTML.
Например:
Кода -копия выглядит следующим образом:
<!-Перед оптимизацией->
<script type = "text/javascript">
функция innerhtmlloop () {
for (var count = 0; count <15000; count ++) {
document.getElementById ('здесь'). innerHtml+= 'a';
}
}
</script>
Эта функция зацикливается на изменении содержимого элемента страницы. Проблема с этим кодом заключается в том, что каждая итерация цикла, элемент доступен дважды: однажды прочитайте свойство Innerhtml и однажды переписывайте его.
Более эффективным подходом является использование локальных переменных для хранения обновленного контента, а затем написать его за один раз после окончания цикла:
Кода -копия выглядит следующим образом:
<!-После оптимизации->
<script type = "text/javascript">
функция innerhtmlloop () {
var content = '';
for (var count = 0; count <15000; count ++) {
Содержание+= 'a';
}
document.getElementbyId ('здесь'). innerHtml+= content;
}
</script>
Чем больше раз вы получаете доступ к DOM, тем медленнее запускается код. Поэтому, когда есть другие решения для их замены, мы должны попытаться свести к минимуму количество посещений DOM.