Quelle est la différence entre refusion et repeindre?
Je ne suis pas un peu clair sur la différence entre refusion + repeindre (s'il y a une différence du tout)
Semble que la refusion pourrait déplacer la position de divers éléments DOM, où repaint ne fait que rendre un nouvel objet. Par exemple, la refusion se produirait lors de la suppression d'un élément et la repeinte se produirait lors du changement de couleur.
Est-ce vrai?
4 réponses
Cette publication semble couvrir les problèmes de performance de refusion vs repeindre
En ce qui concerne les définitions, à partir de ce poste:
Un repeindre se produit lorsque des modifications sont apportées à une peau d'éléments qui change visiblement, mais n'affectent pas son disposition.
Exemples de ceci incluent
outline,visibility,background, oucolor. Selon L'opéra, repeindre est cher parce que le navigateur doit vérifier la visibilité de tous les autres nœuds dans L'arborescence DOM.Un redistribution est encore plus critique pour les performances parce que cela implique des changements qui affecter la mise en page d'une partie de la page (ou toute la page).
Exemples qui provoquent des rediffusions: ajout ou suppression de contenu, modification explicite ou implicite
width,height,font-family,font-sizeet plus encore.
Découvrez quel effet CSS-properties repeindre et revoir à http://csstriggers.com
À mon avis, repeindre affecte simplement le DOM lui-même, mais la refusion affecte toute la page.
Repeindre se produit lorsque certains changements qui seulement ses styles de peau, tels que la couleur et la visibilité.
La refusion se produit lorsque la page de DOM change de mise en page.
Récemment, j'ai trouvé un site peut rechercher quel attribut déclenchera repeindre ou refusion. http://csstriggers.com/
Voici un autre grand poste: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom
Un repeindre, ou redessiner, passe par tous les éléments et détermine leur visibilité, la couleur, le contour et d'autres propriétés de style visuel, puis il met à jour les parties pertinentes de l'écran.
Une refusion calcule la mise en page de la page. Une refusion sur un élément recalcule les dimensions et la position de l'élément, et elle déclenche également d'autres reflets sur les enfants, les ancêtres et les éléments de cet élément qui apparaissent après dans le DOM. Ensuite, il appelle un repeint final. La refusion est très coûteuse.
Il a également introduit lorsque la refusion se produit et comment minimiser la refusion.
La refusion se produit lorsqu'il y a une modification de la disposition DOM. La refusion est très coûteuse 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 de calcul stressant 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 plus 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 un repeindre dans sa procédure.