Jaka jest różnica między reflow a repaint?

Jestem trochę niejasny co do różnicy między ponownym malowaniem a ponownym malowaniem (jeśli w ogóle jest jakakolwiek różnica)

Wygląda na to, że reflow może przesuwać pozycje różnych elementów DOM, podczas gdy repaint to tylko renderowanie nowego obiektu. Np. Rozpływ miałby miejsce przy usuwaniu elementu, a ponowne malowanie przy zmianie jego koloru.

Czy to prawda?

Wydaje się, że ten wpis dotyczy problemów z ponownym malowaniem i ponownym malowaniem

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

Jeśli chodzi o definicje, z tego postu:

Repaint występuje wówczas, gdy zmiany są wprowadzane do elementów skóry, które zmienia się w sposób widoczny, ale nie wpływają na jego wygląd.

Przykłady takich obejmują outline, visibility, backgroundlub color. Według Opery ponowne malowanie jest kosztowne, ponieważ przeglądarka musi zweryfikować widoczność wszystkich innych węzłów w drzewie DOM.

Reflow jest jeszcze bardziej krytyczny do wykonania, ponieważ wiąże się ze zmianami, które wpływają na układ części strony (lub całej strony).

Przykłady, które Spłaty przyczyna to: dodawanie lub usuwanie treści, bezpośrednio lub pośrednio zmienia width, height, font-family, font-sizei więcej.

Dowiedz się, które właściwości CSS odświeżyły i przejrzyj je na http://csstriggers.com

Oto kolejny świetny post: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

Odświeżanie lub przerysowywanie przechodzi przez wszystkie elementy i określa ich widoczność, kolor, kontur i inne właściwości stylu wizualnego, a następnie aktualizuje odpowiednie części ekranu.

Przepływ oblicza układ strony. Przepływ na elemencie ponownie oblicza wymiary i położenie elementu, a także wyzwala dalsze zmiany przepływu elementów potomnych, przodków i elementów, które pojawiają się po nim w DOM. Następnie wzywa do ostatecznego przemalowania. Ponowne przepuszczanie jest bardzo drogie.

Wprowadzono również, kiedy następuje ponowne przepłynięcie i jak zminimalizować przepływ.

Moim zdaniem przemalowanie wpływa tylko na sam DOM, ale ponowne malowanie wpływa na całą stronę.

Odświeżanie występuje, gdy pewne zmiany dotyczą tylko stylów skóry, takich jak kolor i widoczność.

Przepływ występuje, gdy strona DOM zmienia swój układ.

Niedawno odkryłem, że witryna może wyszukiwać, który atrybut spowoduje ponowne malowanie lub ponowne wlanie. http://csstriggers.com/

Przepływ ma miejsce, gdy następuje zmiana w układzie DOM. Przepływ jest bardzo kosztowny pod względem obliczeniowym, ponieważ wymiary i pozycje elementów strony muszą zostać ponownie obliczone, a następnie ekran zostanie przemalowany .

Przykład czegoś, co spowoduje ponowne przepłynięcie

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

document.body.appendChild(newEle);
}

Powyższy kod jest bardzo nieefektywny, powodując 100 procesów ponownego przepływu dla każdego dodanego nowego elementu akapitu.

Ten obciążający obliczeniowo proces można złagodzić, używając .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);

Powyższy kod będzie teraz używał tylko 1x procesu ponownego przepływu do utworzenia 100 nowych elementów akapitu.

Odświeżanie to po prostu zmiana pikseli na monitorze, podczas gdy nadal jest to mniejsze zło, ponieważ proces ponownego malowania obejmuje ponowne malowanie.

Świetne wyjaśnienie, które znalazłem tutaj .

• Reflow: oblicz układ każdego widocznego elementu (pozycja i rozmiar).
• Repaint: renderuje piksele na ekranie.