В чем разница между оплавлением и перекраской?

Question

Мне немного непонятно, в чем разница между reflow + repaint (если вообще есть разница)

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

Это правда?

Answer 1

Эта публикация, по-видимому, покрывает вопросы производительности reflow против перекраски

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

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

A Перекрашивание происходит, когда вносятся изменения в скин элемента, который видимо изменяется, но не влияет на его макет.

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

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

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

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

Answer 2

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

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

Перекомпоновка происходит, когда страница DOM меняет свой макет.

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

Answer 3

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

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

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

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

Answer 4

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

Пример того, что вызовет перекомпоновку

for (let i = 1; i <= 100; i++ {
const newEle = document.createElement('p');
newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);
}

Приведенный выше код очень неэффективен, вызывая 100 процессов перекомпоновки для каждого добавляемого нового элемента абзаца.

Вы можете уменьшить этовычислительно напряженный процесс с использованием .createDocumentFragment()

const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {
    const newEle = document.createElement('p');
    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);
    }

document.body.appendChild(docFrag);

Приведенный выше код теперь вместо этого будет использовать только процесс перекомпоновки 1x для создания 100 новых элементов абзаца.

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