Когда мы разрабатываем насыщенные интернет-приложения (RIA), мы часто пишем некоторые сценарии Javascript для изменения или добавления элементов страницы. Эти задачи в конечном итоге выполняются DOM — или объектной моделью документа — и наш метод реализации влияет на скорость ответа приложения.
Операции DOM заставят браузер выполнить повторный анализ (перекомпоновку), который представляет собой процесс вычислений браузера, определяющий способ отображения элементов страницы. Непосредственное изменение DOM, изменение стиля CSS элемента или изменение размера окна браузера вызовет повторный анализ. Чтение свойств макета элемента, таких как offsetHeithe или offsetWidth, также вызовет повторный анализ. Повторный анализ требует времени вычислений, поэтому чем меньше повторного анализа запускается, тем быстрее будет работать приложение.
Операции DOM обычно либо изменяют существующие элементы страницы, либо создают новые элементы страницы. Следующие четыре решения по оптимизации охватывают два метода изменения и создания узлов DOM, помогая сократить количество повторных анализов браузера.
Решение 1. Измените DOM, изменив имена классов CSS.
Это решение позволяет нам одновременно изменять несколько атрибутов стиля элемента и его дочерних элементов и запускать только один повторный анализ.
нуждаться:
( Примечание emu : у автора оригинальной статьи, очевидно, было короткое замыкание в мозгу, когда он писал это, и он поместил сюда проблемы, которые необходимо решить в последующем режиме манипулирования DOM вне потока. Однако это Легко понять автора по демонстрационному коду. Проблему очень хочу описать, поэтому не буду воспроизводить исходный текст)
Теперь нам нужно написать функцию для изменения нескольких правил стиля гиперссылки. Реализовать это очень просто, достаточно изменить один за другим атрибуты, соответствующие этим правилам. Но проблема в том, что каждое изменение атрибута стиля приводит к повторному анализу страницы.
функция selectAnchor(элемент) {
element.style.fontWeight = 'жирный';
element.style.textDecoration = 'нет';
element.style.color = '#000';
}
Решение:
Чтобы решить эту проблему, мы можем сначала создать имя стиля и поместить все правила стиля, которые нужно изменить, в это имя класса. Затем мы добавим это новое имя класса в гиперссылку, чтобы мы могли добавить несколько правил стиля и выполнять только повторную обработку. сработало. Еще одним преимуществом этой модели является то, что она также обеспечивает разделение производительности и логики.
.selectedAnchor {
начертание шрифта: жирный;
текстовое оформление: нет;
цвет: #000;
}
функция selectAnchor(элемент) {
element.className = 'selectedAnchor';
}