Comment réduire la redistribution du navigateur et les astuces repaint_javascript

1. Évitez les opérations DOM fréquentes directement sur le document Si nécessaire, vous pouvez utiliser des méthodes hors document, notamment les suivantes :

.

(1). Supprimez d'abord l'élément du document, puis remettez l'élément à sa position d'origine après avoir terminé la modification
(2). Réglez l'affichage de l'élément sur "aucun", puis modifiez l'affichage à la valeur d'origine après avoir terminé la modification
(3). Si vous devez créer plusieurs nœuds DOM, vous pouvez utiliser DocumentFragment pour le créer et l'ajouter au document

à la fois.

2. Modifier les styles de manière centralisée

(1). Modifiez le moins possible les attributs sur le style de l'élément
(2). Essayez de modifier le style en modifiant className
. (3). Définissez la valeur du style via l'attribut cssText

.

3. Valeurs des attributs de mise en cache

Pour la valeur de type non référence (type numérique) dans l'attribut Layout, si vous devez y accéder plusieurs fois, vous pouvez d'abord la stocker dans une variable locale lors d'un accès, puis utiliser la variable locale. évitez de lire l'attribut à chaque fois. Provoque le rendu du navigateur.
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;

4. Définissez la position de l'élément sur absolue ou fixe

Lorsque la position de l'élément est statique et relative, l'élément est dans l'arborescence DOM. Lorsqu'une opération sur l'élément nécessite un nouveau rendu, le navigateur restituera la page entière. Définir la position d'un élément sur absolue et fixe peut faire en sorte que l'élément existe indépendamment de la structure arborescente DOM, et le navigateur n'a besoin de restituer l'élément et les éléments en dessous que lorsqu'il a besoin d'être rendu, raccourcissant ainsi le temps dans une certaine mesure. Temps de rendu du navigateur, particulièrement intéressant à prendre en compte aujourd'hui avec le nombre croissant d'animations Javascript.

Ce qui précède sont quelques éléments que j'ai personnellement résumés sur la réduction de la redistribution et de la repeinture du navigateur. J'espère que cela vous plaira tous.