Qu'est-ce que Dom refusion?
Je lisais sur la différence entre deux propriétés css display:none et visibility:hiddenet rencontré Dom refusion terme.
La déclaration était
display: noneprovoque la refusion DOM où estvisibility: hiddenne le fait pas.
Donc ma question Est:
QU'est-ce que Dom refusion et comment cela fonctionne?
3 réponses
Un redistribution calcule la mise en page de la page. Une refusion sur un élément recalcule les dimensions et la position de l'élément, et elle déclenche également d'autres reflux sur les enfants, les ancêtres et les éléments de cet élément qui apparaissent après dans le DOM. Ensuite, il appelle un repeint final. La refusion est très coûteuse, mais malheureusement elle peut être déclenchée facilement.
Le refusion 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éplace un élément DOM
- animer un élément DOM
- prendre des mesures d'un élément tel que offsetHeight ou getComputedStyle
- modifier un style CSS
- change le nom de classe d'un élément
- ajouter ou supprimer une feuille de style
- redimensionner la fenêtre
- Faites défiler
Pour plus d'informations, veuillez vous référer ici: repeints et Reflows: manipulation du DOM responsable
Refow est le nom du processus du navigateur web pour recalculer le positions et géométries des éléments du document, aux fins de rendre une partie ou la totalité du document.
Https://developers.google.com/speed/articles/reflow
display:none masquer le div, comme si la div n'est pas rendu alors que visibility:hidden ne cache mais l'espace est toujours occupée
Cela signifie que si vous définissez dinamically display: none;, votre navigateur recalculera les positions des éléments DOM, si visistibility: hidden; - not. Pensez, parce que visibility: hidden; ne change pas la taille des éléments dans dom.