Влияние на производительность при сокрытии DIV, отображая его вне экрана

Question

Каково влияние на производительность сокрытия сложной части документа HTML в пределах экрана DIV, например:

<div style="position:absolute;top:-10000px;left:-10000px;">
  Lots of HTML here...
</div>

по сравнению с использованием "display: none" или "visiblity: hidden"?

Есть ли снижение производительности / использования памяти?Насколько плохо?Может ли это быть целесообразным, если целью являются мобильные браузеры (iPhone / Android)?

Answer 1

Зависит от браузера. Здесь - хорошая статья о рендеринге, перерисовке перекомпоновки в браузерах.Таким образом, теоретически это не должно отображаться, когда что-то изменилось на стороне, поскольку все элементы с абсолютным позиционированием не будут отображаться, когда что-то изменилось в родительских элементах.Так что он должен работать лучше, чем отображать: ни один, который будет перерисован, например, в IE .Но у вас все еще много DOM-элементов в памяти браузера.Так что, может быть, лучше убрать элементы из DOM и добавить их позже.

Answer 2

С точки зрения производительности, вы лучше всего создадите свой HTML как строку, вставив его в DOM за один раз.Изменения DOM вызывают перерисовку, поэтому чем меньше DOM изменяет, тем лучше.