В чем разница между reflow и repaint?

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

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

Это правда?

51
javascript performance reflow repaint

4 ответов

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

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 is еще более важно для производительности потому что это включает в себя изменения, которые повлиять на компоновку части страница (или вся страница).

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

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

66

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

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

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

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

6

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

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

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

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

4

Reflow происходит, когда происходит изменение макета DOM. 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 оплавления для создания 100 новых элементов абзаца.

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

1