Qu'est-ce que la refusion DOM?
Je lisais la différence entre deux propriétés css display:none et visibility:hidden et rencontré refusion DOM terme.
La déclaration était
display: noneprovoque la refusion DOM où estvisibility: hiddennon.
Ma question est donc:
Qu'est-ce que la refusion DOM et comment cela fonctionne-t-il?
Un refusion calcule la mise en page de la page. Une redistribution sur un élément recalcule les dimensions et la position de l'élément, et elle déclenche également des redistributions supplémentaires sur les enfants, les ancêtres et les éléments de cet élément qui apparaissent après dans le DOM. Ensuite, il appelle une repeinture finale. La refusion est très coûteuse, mais malheureusement, elle peut être déclenchée facilement.
La redistribution se produit lorsque vous:
- insérer, supprimer ou mettre à jour un élément dans le DOM
- modifier le contenu de la page, par exemple le texte dans une zone de saisie
- déplacer un élément DOM
- animer un élément DOM
- prendre des mesures d'un élément tel que offsetHeight ou getComputedStyle
- changer un style CSS
- changer le nom de classe d'un élément
- ajouter ou supprimer une feuille de style
- redimensionner la fenêtre
- scroll
Pour plus d'informations, veuillez vous référer ici: Repeintures et reflows: Manipuler le DOM de manière responsable
Redistribution est le nom du processus du navigateur Web pour recalculer les positions et les géométries des éléments dans le document, dans le but de restituer une partie ou la totalité du document.
https://developers.google.com/speed/articles/reflow
display:none masque le div comme si le div n'est pas rendu alors que visibility:hidden ne se cache que mais l'espace est toujours occupé
Cela signifie que si vous définissez display: none;, votre navigateur recalculera les positions des éléments DOM, si visibilité: caché; - ne pas. Pensez-y parce que visibility: hidden; ne change pas la taille des éléments dans DOM.