Exemples de redessinage et de réarrangement CSS

Cet article vous présente principalement les informations pertinentes sur les méthodes de redessin et de redistribution CSS. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant, dans l'espoir de vous aider.

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 le construit en fonction sur les attributs géométriques des éléments DOM 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 re-layout 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 certains 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 le flux de documents et ses modifications n’affecteront 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 dont l'attribut d'affichage est aucun 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.

Recommandations associées :

Redistribution des pages. Méthodes d'optimisation du dessin et de la redistribution

Rendu, redessin et redistribution des pages de développement WEB hautes performances.

JS génère des vignettes, les télécharge et utilise Canvas pour redraw_javascript skills

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!