Qu'est-ce que DOM de redistribution?

Je lisais à propos de la différence entre les deux propriétés css display:none et visibility:hidden et rencontré DOM redistribution terme.

La déclaration a été

display: none causes DOM de redistribution où est visibility: hidden ne l'est pas.

Donc ma question est:

Qu'est-ce que DOM redistribution et comment il fonctionne?

  • visibility: hidden garder l'objet dans l'espace, de sorte que le navigateur n'a pas besoin de recalculer les dom position de l'élément de
  • Simplement dit, DOM de Redistribution, c'est quand votre navigateur a besoin de recalculer la position/taille de vous des éléments du DOM pour afficher une page. Dans votre exemple, vous avez probablement remarqué que visibility: hidden élément semble être encore là (l'espace nécessaire pour montrer qu'il est encore prise, il est toujours "dans le flux", juste invisible), tandis qu'un display: none élément prend votre élément complètement hors de la circulation.
  • Je suis venu ici en voyant l'énoncé exact.
InformationsquelleAutor eirenaios | 2014-12-24
  1. 74

    Un de redistribution calcule la mise en page de la page. Un reflow sur un élément recalcule les dimensions et la position de l'élément, et il déclenche également davantage les remboursements sur que les enfants de l'élément, les ancêtres et les éléments qui apparaissent dans les DOM. Elle appelle ensuite une finale repeindre. La redistribution est très cher, mais malheureusement, il peut être déclenché facilement.

    De 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 du DOM
    • animer un élément du DOM
    • prendre des mesures d'un élément tel qu'offsetHeight ou getComputedStyle
    • changement de style CSS
    • changer la classe d'un élément
    • ajouter ou supprimer une feuille de style
    • redimensionner la fenêtre
    • de défilement

    Pour plus d'informations, veuillez consulter ici: Repeint et les Remboursements: Manipulation du DOM de manière responsable

    • Merci!!!! L'apparition de la liste est utile!
    • Content que ça vous a aidé!
    • l'animation d'un élément du DOM pas nécessairement déclencher de redistribution, par exemple. si vous utilisez la propriété CSS3 pour transformer, de redistribution ne se produise pas
    • Changer visibility à none n'est pas un changement de style CSS?
    • Il y a beaucoup de changements de style, ce qui peut entraîner une redistribution du texte, donc je suppose que c'est pourquoi ils sont en train de dire "changement de style CSS" à l'échelle mondiale.
    InformationsquelleAutor Karlen Kishmiryan
  2. 9

    De redistribution est le nom du navigateur web, processus de re-calcul de la
    les positions et les géométries des éléments dans le document, dans le but
    de re-rendu de partie ou de la totalité du document.

    https://developers.google.com/speed/articles/reflow

    display:none cacher la div comme si le div n'est pas rendu alors que visibility:hidden ne cache mais l'espace est toujours occupée

    • Le lien est utile!
    InformationsquelleAutor Vitorino fernandes
  3. 0

    C'est à dire que si tu dinamically display: none;, votre navigateur va recalculer les positions des éléments du DOM, si visisbility: hidden; - pas. Pense, parce que visibility: hidden; ne pas changer les tailles de l'élément dans le dom.

    InformationsquelleAutor degr