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

IE7/Windows XP

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

HTML:

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

CSS:

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

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

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

Решение:

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