Repaint/ redraw - występuję gdy coś co było ukryte nagle się pojawia i odwrotnie, nie naruszając layoutu dokumentu (visibility, background, outline).
Reflow - wiąże się z większymi zmianami. Występuje gdy DOM tree jest zmieniane, gdy style mają wpływ na układ layout, gdy zmianom ulegają atrybuty węzłów (np. className)
lub pobieramy wielkość elementów (pobieranie rozmiaru wymusza reflow aby pobrać dane z elementu).
Zmiany reflow są kaskadowe: zmianie ulega docelowy element ale także jego dzieci i elementy następne, wystepujące po zmienianym elemencie.
Na końcu wszystko jest poddane procesowi repaint.
Elementy pozycjonowane absolutnie lub fixed nie naruszają layoutu więc tylko one ulegają reflow. Na końcu ich zmiany także występuje repaint ale jest on mniej
zasobożerny niż reflow całego dokumentu.
Należy zauważyć, że niektóre elementy mają wolniejszy reflow. Reflow elementu z diplay table jest wolniejszy niż element block display.
Porady:
#1 używać document.createDocumentFragment
#2 element ukryty (display: none) nie podlega reflow, nawet gdy zmienia się jego zawartość
#3 zamiast zmieniać po kolei kilka styli, zastosuj klasę z nadanymi stylami. Jeśli już musisz skorzystać ze styli inline użyj cssText