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

Question 1

Я немного не понимаю, в чем разница между оплавлением + перерисовкой (есть ли вообще разница)

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

Это правда?

Question 2

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

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

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

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

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

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

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

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

Question 3

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

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

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

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

Question 4

На мой взгляд, перерисовка влияет только на саму модель DOM, но перекомпоновка влияет на всю страницу.

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

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

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

Question 5

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 новых элементов абзаца.

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

Question 6

Отличное объяснение, которое я нашел здесь .

Reflow: вычислить расположение каждого видимого элемента (положение и размер).
Repaint: отображает пиксели на экране.