Скаженi кабани: Оптимизируем операции с DOM'ом
Давно известно, что операции с DOM'ом весьма и весьма трудоемки. Потери в производительности заметны обычно в трех случаях:
- когда скрипт выполняет манипуляции с деревом объектов (создает, удаляет или изменяет часть дерева)
- если скрипт "заставляет" браузер перерисовывать (redraw) или перестраивать разметку (reflow) страницы
- и наконец, в случае когда скрипт "ищет" один из узлов дерева объектов (если дерево большое).
Последний пункт я уже рассматривал в одной из статей своего цикла Скаженi кабани,
на примере JQuery. Поэтому сегодня мы поговорим о первых двух. Эм...на
самом деле я схитрил, и первый пункт представляет собой ни что иное,
как причину появления второго пункта. Тогда сразу перейдем ко второму
пункту и попробуем разобраться в терминах перерисовывать и
перестраивать разметку:
Перерисовка страницы браузером
происходит в случае, когда что-то визуально изменилось, но разметка
страницы осталась прежней. Например, изменился цвет элемента или
элемент стал видимым/невидимым (с помощью visibility: [hidden,
visible], так как это не повлияет на разметку). Эта операция
существенно влияет на производительность веб приложения, так как
заставляет браузер пройтись по дереву объектов и определить какие
элементы видимы и как они должны быть отображены.
Читать полностью...