web-dev-qa-db-fra.com

Quelle est la différence entre la refusion et la repeinture?

Je ne suis pas certain de la différence entre refusion + repeindre (s'il y a une différence)

On dirait que la refusion pourrait déplacer la position de divers éléments DOM, où repeindre ne fait que rendre un nouvel objet. Par exemple. la refusion se produirait lors de la suppression d'un élément et la repeinture se produirait lors du changement de sa couleur.

Est-ce vrai?

javascriptperformancerepaintreflow
66
Jon Raasch

Cette publication semble couvrir les problèmes de performances de refusion vs repeinture

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

Quant aux définitions, de ce poste:

Un repeint se produit lorsque des modifications sont apportées à un habillage d'éléments qui change visiblement, mais n'affecte pas sa disposition.

Par exemple, outline, visibility, background ou color. Selon Opera, repeindre coûte cher car le navigateur doit vérifier la visibilité de tous les autres nœuds de l'arborescence DOM.

Une refusion est encore plus critique pour les performances car elle implique des modifications qui affectent la mise en page d'une partie de la page (ou de la page entière).

Les exemples qui provoquent la redistribution incluent: l'ajout ou la suppression de contenu, la modification explicite ou implicite de width, height, font-family, font-size et plus.

Découvrez quels effets CSS repeindre et réviser sur http://csstriggers.com

79
DVK

À mon avis, repeindre affecte uniquement le DOM lui-même, mais la redistribution affecte la page entière.

La repeinture se produit lorsque certains changent uniquement les styles de peau, comme la couleur et la visibilité.

Une redistribution se produit lorsque la page du DOM change de disposition.

Récemment, j'ai trouvé qu'un site peut rechercher quel attribut déclenchera une nouvelle peinture ou une redistribution. http://csstriggers.com/

6
leohxj

Voici un autre excellent article: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

Un repeint, ou redessiner, passe par tous les éléments et détermine leur visibilité, couleur, contour et autres propriétés de style visuel, puis il met à jour les parties pertinentes de l'écran.

Une redistribution calcule la mise en page de la page. Une redistribution sur un élément recalcule les dimensions et la position de l'élément, et elle déclenche également des redistributions supplémentaires sur les enfants, les ancêtres et les éléments de cet élément qui apparaissent après dans le DOM. Ensuite, il appelle une repeinture finale. La refusion est très coûteuse.

Il a également introduit le moment où la refusion se produit et comment minimiser la refusion.

5
coderz

Reflow se produit en cas de modification de la disposition DOM. Le refusion est très coûteux en calcul car les dimensions et les positions des éléments de page doivent être calculées à nouveau, puis l'écran sera repeint.

Exemple de quelque chose qui provoquera la refusion

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

document.body.appendChild(newEle);
}

Le code ci-dessus est très inefficace, provoquant 100 processus de refusion pour chaque nouvel élément de paragraphe ajouté.

Vous pouvez atténuer ce processus stressant sur le plan informatique en utilisant .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);

Le code ci-dessus n'utilisera désormais à la place que le processus de refusion 1x pour la création de 100 nouveaux éléments de paragraphe.

Repeindre est simplement le changement de pixels sur le moniteur, tout en le taxant est le moindre des deux maux, car une refusion inclut une repeinture dans sa procédure.

3
starWave