Когда происходит перекомпоновка в среде DOM? - PullRequest
50 голосов
/ 04 февраля 2009

Какие виды деятельности приведут к перевыполнению веб-страницы с помощью DOM?

Кажется, есть разные точки зрения. По http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/, бывает

  • При добавлении или удалении узла DOM.
  • При динамическом применении стиля (например, element.style.width = "10px").
  • При получении измерения, которое должно быть рассчитано, например, при доступе к offsetWidth, clientHeight или любому вычисленному значению CSS (через getComputedStyle () в DOM-совместимых браузерах или currentStyle в IE).

Тем не менее, согласно http://dev.opera.com/articles/view/efficient-javascript/?page=3, выполнение измерений запускает перекомпоновку только тогда, когда в очереди уже имеется действие оплавления.

У кого-нибудь есть еще идеи?

Ответы [ 3 ]

45 голосов
/ 14 августа 2009

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

Кроме того, насколько я могу судить, обе статьи говорят об одном и том же.

В первой статье говорится, что оплавление происходит, когда:

Когда вы извлекаете измерение, которое должно быть рассчитано , например, обращаетесь к offsetWidth , clientHeight или к любому вычисленному значению CSS (через getComputedStyle ( ) в DOM-совместимых браузерах или currentStyle в IE), в то время как изменения DOM ставятся в очередь для внесения.

Вторая статья гласит:

Как указывалось ранее, браузер может кэшировать несколько изменений для вас и перекомпоновывать только один раз, когда все эти изменения были сделаны. Тем не менее, обратите внимание, что при проведении измерений элемента заставит его переформатировать , так что измерения будут правильными. Изменения могут или не могут быть визуально перекрашены, но само перекомпоновка все еще должна происходить за кулисами.

Этот эффект создается, когда измерения выполняются с использованием таких свойств, как offsetWidth или с использованием таких методов, как getComputedStyle . Даже если числа не используются, простого запуска любого из них, пока браузер все еще кэширует изменения, будет достаточно для запуска скрытого перекомпоновки. Если эти измерения проводятся неоднократно, вам следует рассмотреть возможность их однократного сохранения и сохранения результата, который затем можно будет использовать позже.

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

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

Приветствие.

3 голосов
/ 21 сентября 2010

Посмотрите на раздел «Рендеринг, вызванный доступом для чтения свойств» в Понимание поведения рендеринга в Internet Explorer , где следующий код в IE вызовет действие рендеринга.

function askforHeight () {
  $("#lower").height();  
}
1 голос
/ 04 февраля 2009
document.body.style.display = 'none';
document.body.style.display = 'block';

Это часто решает эти непонятные ошибки макета.

...