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

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

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

Это правда?

4 51
javascript performance repaint reflow

4 ответа:

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

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

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

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

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

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

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

узнайте, какие css-свойства эффект перекрасить и обзор на http://csstriggers.com

66

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

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

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

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

6

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

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

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

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

4

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

пример чего-то, что вызовет оплавление

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 reflow для создания 100 новых элементов абзаца.

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

1