Влияет ли видимость на производительность манипулирования DOM?

Question

IE7 / Windows XP

У меня на странице есть сторонний компонент, который выполняет множество манипуляций с DOM, чтобы настраиваться каждый раз при изменении размера окна браузера.

К сожалению, я мало контролирую то, что он делает внутри, и я максимально оптимизировал все остальное (например, обратные вызовы и обработчики событий). Я не могу снять компонент с потока, установив display: none, потому что он не сможет измерить сам себя, если я это сделаю.

В целом, помогает ли настройка видимости контейнера на невидимость при изменении размера улучшить производительность рендеринга DOM?

Answer 1

Предостережение: я специально не проверял это с IE7, но я достаточно уверен, основываясь на том, что я знаю о его модели манипулирования DOM.

Изменение свойств CSS (display: none или visibility: hidden или что-то еще) не повлияет на производительность манипулирования DOM в любой версии любого браузера, с которым я работал. Основной способ повысить скорость манипулирования DOM - это удалить узлы, с которыми вы будете работать, из дерева документов, выполнить ваши манипуляции и добавить их обратно. Это включает в себя отслеживание их последующих узлов, если таковые имеются (для использования с insertBefore), который может стать сложным, если вы работаете с узлами, разбросанными по всему документу.

Одна техника, которую я видел, выполняя большое количество манипуляций DOM одновременно, - это получить список дочерних элементов body, удалить их, выполнить ваши манипуляции (где бы они ни находились в дереве документа), а затем заново подключить дочерние узлы тела. В зависимости от того, сколько времени занимают ваши DOM-манипуляции (что само по себе частично зависит от скорости компьютера вашего посетителя!), Это может вызвать заметное мерцание. Вот почему сайты, манипулирующие контентом через AJAX, обычно заменяют любой временно удаленный контент на «спиннер» или загрузочный экран.

Answer 2

Я не уверен, но удаление его из DOM активного документа с последующим манипулированием им повышает производительность. После того, как все манипуляции сделаны, присоедините его обратно к DOM документа. Думайте об этом как об обмене буфером видео.

Answer 3

Я только что проверил это, используя ситуацию с диалоговым окном кнопки. По сути, я много раз копировал одно длинное диалоговое окно, пока не получил файл размером 10000 строк.

HTML:

<div class="no-visible dialog">
    ....
</div>

CSS:

.no-visible {
    visibility: hidden;
    animation:....
    ....
}

вывод представляется:

Это сильно замедлило работу компьютера со всеми JS и CSS, и все мои анимации CSS исчезли. Особенно, когда нажата кнопка, и JS нужно найти соответствующий диалог для отображения, она запаздывает.

Решение:

Поместите диалоги в другой html (dialogs.html) и загрузите необходимое при необходимости.