Comment utiliser le redessin et la redistribution

Cette fois, je vais vous montrer comment utiliser redraw et reflow, et quelles sont les précautions lors de l'utilisation de redraw et reflow. Voici un cas pratique, jetons un oeil.

Principe de chargement de la page du navigateur

Habituellement, lorsque le document est chargé pour la première fois, le moteur du navigateur analyse le document HTML pour créer une arborescence DOM , puis en fonction des propriétés géométriques des éléments DOM, construisez un arbre pour le rendu. Chaque nœud de l'arbre de rendu possède des attributs tels que la taille et la marge, similaires au modèle de boîte (puisque les éléments cachés n'ont pas besoin d'être affichés, l'arbre de rendu ne contient pas d'éléments cachés dans l'arborescence DOM). Lorsque l'arbre de rendu est construit, le navigateur peut placer les éléments dans la position correcte, puis dessiner la page en fonction des attributs de style des nœuds de l'arbre de rendu. En raison de la disposition du flux du navigateur, le calcul de l'arbre de rendu ne doit généralement être parcouru qu'une seule fois. À l'exception de la table et de ses éléments internes, plusieurs calculs peuvent être nécessaires pour déterminer les attributs de ses nœuds dans l'arbre de rendu, ce qui prend généralement 3 fois plus de temps que les éléments équivalents. C'est l'une des raisons pour lesquelles nous devrions éviter d'utiliser des tableaux pour la mise en page.

Redessiner

Redessiner est un comportement du navigateur déclenché par une modification de l'apparence d'un élément, telle que la modification d'attributs tels que la visibilité, le contour et la couleur d'arrière-plan. Le navigateur redessinera l'élément en fonction de ses nouveaux attributs, donnant à l'élément une nouvelle apparence. Le redessinage n'entraîne pas de relayage et ne s'accompagne pas nécessairement de refusion. Les navigateurs paient un prix élevé en termes de performances lors du redessinage et de la redistribution.

Réarrangement

Le réarrangement est un changement plus évident, qui peut être compris car l'arbre de rendu doit être recalculé. Voici les opérations courantes qui déclenchent la redistribution :

1. Modifications des attributs géométriques des éléments DOM.

2. Changements de structure de l'arborescence DOM.

Par exemple, l'augmentation, la diminution, le mouvement des nœuds, etc.

Obtenez quelques attributs.

Lors de l'obtention de certains attributs, le navigateur déclenchera également une redistribution pour obtenir la valeur correcte. Cela rend l'optimisation du navigateur inefficace. Ces propriétés incluent : offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle() (currentStyle dans IE). Par conséquent, ces valeurs doivent être mises en cache lorsqu’elles sont utilisées plusieurs fois.

De plus, la modification de certains styles d'éléments, le redimensionnement de la fenêtre du navigateur, l'apparition de barres de défilement, etc. déclencheront également une redistribution.

Réduisez le nombre de réorganisations et la portée de l'impact de la réorganisation

1. Combinez plusieurs opérations de modification des attributs de style en une seule opération. Par exemple,

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee';
    changep.style.height = ‘200px';
    可以合并为：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep';

2. Définissez l'attribut de position d'un élément qui doit être réorganisé plusieurs fois sur absolu ou fixe, afin que cet élément soit hors du flux de documents et que ses modifications n'affectent pas les autres. éléments. Par exemple, il est préférable de définir les éléments avec des effets animés sur un positionnement absolu.

3. Utilisez le nœud plusieurs fois dans la mémoire, puis ajoutez-le au document une fois terminé. Par exemple, vous souhaitez obtenir des données de table de manière asynchrone et les afficher sur la page. Vous pouvez d'abord obtenir les données, puis créer le fragment HTML de la table entière en mémoire, puis l'ajouter au document en une seule fois, au lieu d'ajouter chaque ligne dans une boucle.

4. Étant donné que les éléments avec un attribut d'affichage nul ne sont pas dans l'arbre de rendu, les opérations sur les éléments masqués ne provoqueront pas le réarrangement des autres éléments. Si vous souhaitez effectuer des opérations complexes sur un élément, vous pouvez d'abord le masquer, puis l'afficher une fois l'opération terminée. Cela ne déclenche que 2 refusions lors du masquage et de l'affichage.

5. Lorsque vous avez besoin de récupérer fréquemment des valeurs d'attribut qui provoquent une redistribution du navigateur, mettez-les en cache dans des variables

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. attention à php pour des informations plus intéressantes. Autres articles connexes sur le site Web chinois !

Lecture recommandée :

S5 permet une adaptation d'écran en couches

h5 implémente le téléchargement d'aperçus multi-images et des commandes de glissement cliquables

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!