Analyse conceptuelle du redessin et de la redistribution dans les navigateurs

Le contenu de cet article concerne l'analyse conceptuelle du redessin et de la redistribution dans les navigateurs. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Arbre de rendu
1. Le navigateur analyse le code HTML obtenu dans une arborescence DOM, et chaque balise HTML est un nœud dans l'arborescence DOM, le nœud racine est notre objet document couramment utilisé. L'arborescence DOM contient toutes les balises HTML, y compris display:none masqué et les éléments ajoutés dynamiquement à l'aide de JS

2 Le navigateur analyse tous les styles (css définis par l'utilisateur et agents utilisateur) dans le corps des structures de style, les styles qui. le navigateur ne peut pas reconnaître sera supprimé pendant le processus d'analyse. Par exemple, IE supprimera les styles commençant par -moz et Firefox supprimera les styles commençant par _

3. un arbre de rendu. L'arbre de rendu est similaire à l'arbre de rendu, mais la différence est très grande. L'arbre de rendu peut identifier les styles. Chaque nœud de l'arbre de rendu a son propre style, et l'arbre de rendu ne contient pas de nœuds cachés (tels que ceux-ci). comme affichage). :aucun nœuds, ainsi que les nœuds principaux), car ces nœuds ne seront pas utilisés pour le rendu et n'affecteront pas le rendu.

2. Définition du redessin et de la redistribution
Redessin : Lorsque le style de l'élément courant (couleur de fond, couleur de police, etc.) change, nous Il vous suffit de restituer les éléments modifiés. Le nouveau rendu a un faible impact sur les performances du navigateur, il n'est donc généralement pas pris en compte.

Le redessin se produit : modifiez le style d'apparence du conteneur, tel que l'arrière-plan : noir, etc. Changer l'apparence ne change pas la mise en page et n'affecte pas les autres DOM.

Reflow : fait référence au processus par lequel le navigateur recalcule la position et la structure géométrique des éléments du document afin de restituer une partie ou la totalité du document.
Parce que la redistribution peut entraîner la reconstruction de l'intégralité de l'arborescence DOM, elle nuit grandement aux performances
La redistribution d'un élément provoque la présence de tous ses éléments enfants et des éléments ancêtres immédiatement suivants dans le DOM Refusion ultérieure.

3. Opérations qui déclenchent la redistribution
1. Redimensionnement de la fenêtre

2. Modification de la police)

3. ou supprimer une feuille de style

4. Modifications du contenu, comme un utilisateur tapant du texte dans une zone de saisie)

5 Activation de pseudo-classes CSS telles que :hover (dans IE, l'activation du frère ou de la sœur). pseudo classes de nœud) la pseudo classe d'un frère)

6. Manipulation de l'attribut de classe (Manipulation de l'attribut de classe)

7. Un script manipulant le DOM (Un script manipulant le DOM)

8. Calcul de offsetWidth et offsetHeight

9. Définition d'une propriété de l'attribut de style

10. Éléments positionnés fixes, lors du glissement et du défilement La barre continuera à redistribuer

Comment éviter la redistribution
1. Changer ensemble : Si vous souhaitez changer le style d'un élément, vous pouvez concentrer tous les styles sur une seule classe et le changer en même temps, et ne pas changer. plusieurs fois
2. Utilisez l'absolu
3. Évitez d'utiliser des dispositions de tableau
4. N'utilisez pas d'expressions CSS
5. Changez les éléments à la fin
6. contrôle
Par exemple, lorsque l'on fait glisser un élément, je l'actionne lorsque sa coordonnée x ou y change de 5 pixels. Cela réduit la fluidité, mais améliore les performances
7. Si vous voulez compliquer les choses. Si les performances changent, tels que les effets d'animation, veuillez l'implémenter en dehors de cette ligne de flux. Utilisez position-absolute ou position-fixed pour l'implémenter.
8. Puisque le calcul de offsetWidth provoquera également une redistribution, utilisez une variable pour l'enregistrer
9 Lorsque nous devons ajouter des nœuds au document, nous pouvons utiliser la fragmentation du document pour résoudre ce problème. nouveaux éléments dans le DOM, placez-les d'abord dans un conteneur, puis ajoutez-les uniformément, afin qu'une seule refusion se produise

Recommandations associées :

Deux façons de s'appeler self -exécution de fonctions en js

Résumé d'analyse des objets locaux et des objets intégrés et des objets hôtes en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!