Si j'ai beaucoup de DOM sur la page et que je les mets tous à afficher: aucun, le navigateur réagit toujours rapidement (le défilement est rapide, la page semble accrocheuse). Cependant, si je visibilité: caché les éléments, le navigateur est aussi lent que s'ils étaient tous dessinés sur l'écran. Est-ce que quelqu'un peut expliquer en détail pourquoi c'est le cas?Beaucoup de DOM. Caché vs sans affichage
bien une certaine manière, ils sont tirés (mais pas vraiment): Le navigateur conserve l'espace pour eux, il doit tenir compte des éléments lors de la pose sur ceux qui sont visibles.
Voir MDC visibility:hidden:
La boîte est invisible (entièrement transparent, rien est tiré), mais toujours affecte la mise en page. Les descendants de l'élément seront visibles s'ils ont une visibilité: visible (cela ne fonctionne pas dans IE jusqu'à la version 7).
Si vous spécifiez display: none à la place, le navigateur se soucie uniquement de la mise en page des objets visibles. Il n'a pas du tout à prendre en compte les autres.
En fonction de votre ratio visible/invisible et du nombre d'éléments, cela peut faire la différence.
Meilleure explication en anglais clair pour le moment. – jball
Avec visibility:hidden ils sont tous dessinés à l'écran, mais ils ne sont pas visibles par l'utilisateur. À la place, avec display:none ils ne sont pas dessinés
Je voudrais clarifier, pour 'visibility: hidden' ils sont rendus dans la mise en page mais ** pas ** dessinés sur l'écran. – jball
"le navigateur est aussi lent que s'ils étaient tous dessinés sur l'écran."
Je pense que c'est lent parce que le tag est toujours rendu, mais n'est pas visible à l'écran.
Découvrez this
Avec visibility: hidden leurs tailles doivent être calculées afin que l'espace approprié leur soit réservé. Ils sont, effectivement, encore dessinés.
Parce que display: none supprime réellement les éléments du DOM. visibility: hidden les rend simplement invisibles, mais ils sont toujours là.
Vous pouvez remarquer la différence car les champs de saisie de formulaire qui ont display: none ne seront simplement pas inclus dans le formulaire lorsque vous l'envoyez; champs d'entrée qui ont simplement visibility: hidden ensemble seront toujours là. Eh bien, au moins, c'est mon expérience - les autres navigateurs peuvent se comportent différemment.
Les styles ne devraient pas affecter le DOM. Le comportement décrit ici contredit la section "17.13.2 Successful controls" dans la spécification HTML 4.01. – CurtainDog
affichage: aucun; ne supprime pas ou n'affecte en rien la représentation DOM d'un élément. – csuwldcat
J'ai vérifié que pour certains navigateurs, définir 'display: none' de façon dynamique * supprime * les éléments du DOM, indépendamment de ce que dit la spécification. C'est apparemment une optimisation des performances. Je l'ai vu au moins dans Safari 6.2.2. Parent de Upvote. – Yitz
En utilisant display:none, le navigateur n'initialise pas ces éléments ni ne rend le contenu. Ce n'est pas le cas lorsque vous utilisez visibility:hidden, qui initialise ces éléments mais les cache juste.
Imaginez un tableau.
Vous avez un fond blanc et vous commencez à dessiner une pomme avec beaucoup de détails pendant une heure et vous la couvrez complètement avec une autre couche de peinture blanche. C'est visibility.
display:none est comme ne pas le dessiner depuis le début. Bien sûr, c'est plus rapide au premier chargement.
Il y a des inconvénients lorsque vous utilisez display:none cependant: lorsque vous passez en arrière à block (ou inline etc), vous devrez commencer à dessiner le tableau, mais en utilisant la visibilité du navigateur est gratter la dernière couche de peinture et il est arrière. Donc visibility est plus rapide dans ce cas.
Mais rappelez-vous une chose lorsque vous utilisez visibility:hidden l'élément conserve sa position dans le flux de sorte que les éléments autour de lui ne bougeront pas.
Si vous voulez une explication technique, vérifiez David Baron's talk.
Ceci est assez intéressant. Donc, en substance, visibility: hidden est techniquement le même que opacity: 0?
Je ne suis pas un fabricant de navigateurs, mais ne serait-ce pas un énorme gain de performance si les éléments cachés n'étaient pas rendus ou peints mais représentés comme un carré transparent avec les dimensions de l'élément? Au moins dans les situations où les dimensions étaient connues.
duplication possible de [L'opacité: 0 a-t-elle exactement le même effet que la visibilité: cachée] (http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as- visibilityhidden) – givanse