Какая разница между reflow и repaint?

Я немного неясен в отношении разницы между reflow + repaint (если есть какая-либо разница вообще)

Похоже, что reflow может смещать положение различных элементов DOM, где repaint просто создает новый объект. Например. reflow произойдет при удалении элемента, и при изменении его цвета произойдет перерисовка.

Это правда?

Ответы

Ответ 1

Эта публикация, по-видимому, охватывает проблемы с оплатой по сравнению с перерисовкой.

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Что касается определений, из этого сообщения:

A repaint происходит при внесении изменений к коже элементов, которое изменяется видимо, но не влияют на его раскладка.

Примеры этого включают outline, visibility, background, или color. Согласно Opera, перекраска дорого, потому что браузер должен проверить видимость всех других узлов в дереве DOM.

A reflow - это еще более важно для производительности потому что это связано с изменениями, которые влияют на компоновку части страницы (или всей страницы).

Примеры, которые вызывают перепланировки, включают: добавление или удаление содержимого, явное или неявное изменение width, height, font-family, font-size и т.д.

Узнайте, какие эффекты css-свойств перерисовываются и просматриваются на http://csstriggers.com

Ответ 2

По-моему, перерисовка влияет только на сам DOM, но reflow влияет на всю страницу.

Перекрашивание происходит, когда некоторые изменения, которые только его стили кожи, такие как цвет и видимость.

Reflow возникает, когда страница DOM изменяет свой макет.

Недавно я обнаружил, что сайт может искать, какой атрибут вызовет перерисовку или оплату. http://csstriggers.com/

Ответ 3

Вот еще одно замечательное сообщение: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

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

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

Он также вводится, когда происходит переполнение и как минимизировать оплату.