Мені трохи незрозуміло, яка різниця між перефарбуванням + перефарбуванням (якщо взагалі є якась різниця)
Здається, що переформатування може змінити позицію різних елементів DOM, де перефарбовування - це просто візуалізація нового об’єкта. Наприклад, переплавлення відбуватиметься при видаленні елемента, а перефарбування відбуватиметься при зміні його кольору.
Це правда?
Відповіді:
Здається, ця публікація охоплює проблеми з переформатуванням та перефарбуванням
Що стосується визначень, з цього посту:
Перефарбовувати відбувається при внесенні змін на елементи шкіри , яка змінює помітно, але не впливають на його макет.
Приклади цього включають в себе
outline,visibility,background, абоcolor. За даними Opera, перефарбування коштує дорого, оскільки браузер повинен перевірити видимість усіх інших вузлів у дереві DOM.Опалювальному ще більш важливе значення для продуктивності , так як вона включає в себе зміни , які впливають на розташування частини сторінки (або всієї сторінки).
Приклади , які викликають перекомпонування включають: додавання або видалення вмісту, явно або неявно змінюється
width,height,font-family,font-sizeі багато іншого.
Дізнайтеся, які властивості css впливають на перефарбування та перегляньте на веб-сайті http://csstriggers.com
Ось ще одна чудова публікація: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom
Перефарбування, або перемальовування, проходить усі елементи та визначає їх видимість, колір, контур та інші властивості візуального стилю, а потім оновлює відповідні частини екрана.
Перепланування обчислює макет сторінки. Переназначення елемента перераховує розміри та положення елемента, а також запускає подальше перенаправлення на дітей, предків та елементи цього елемента, які з’являються після нього в DOM. Потім він викликає остаточне перефарбування. Переплавлення дуже дороге.
Він також вводиться, коли відбувається переплавлення та як мінімізувати переплавлення.
На мій погляд, перефарбування просто впливає на сам DOM, але переформатування впливає на всю сторінку.
Перефарбування відбувається, коли деякі зміни змінюються лише у стилі шкіри, наприклад, колір та видимість.
Повторне відтворення відбувається, коли сторінка DOM змінює свій макет.
Нещодавно я знайшов, що сайт може шукати, який атрибут спричинить перефарбування або переформатування. http://csstriggers.com/
Повторний потік відбувається, коли змінюється макет 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 нових елементів абзацу.
Перефарбовування - це лише зміна пікселів на моніторі, хоча це все одно оподатковує це менше з двох зол, оскільки перепланування включає перефарбовування у свою процедуру.
Чудове пояснення, яке я знайшов тут .
Reflow: обчислити макет кожного видимого елемента (положення та розмір). Repaint: відображає пікселі на екрані.