1 minute

En une minute : display:none plus rapide que hide ?

flattr this!

On m'a toujours dit que

$("#test").hide().show();
// est moins rapide que
$("#test").css('display', 'none').show();

Mais, ça m'embêtait un peu parce que hide n'est pas réellement un alias de display:none. Sauf que moi, je suis aussi un peu fainéant. J'aime bien hide parce que ça va plus vite écrire. Et surtout, ça donne pas un peu moins l'idée qu'on peut jouer directement avec les CSS dans du code JS. Après tout, à part pour quelques raisons pratiques quasi indéfendables, manipuler les styles via le JS plutôt que le CSS n'est pas une bonne idée. Autant ne pas y faire explicitement allusion.

Du coup, j'ai fait un JS Perf. Je suis satisfait de voir que je vais pouvoir continuer de faire mon fainéant et utiliser hide().

Les résultats ici : http://jsperf.com/jquery-hide-or-display-none

flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans En une minute, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

5 réponses à En une minute : display:none plus rapide que hide ?

  1. faz dit :

    Salut Mathieu,
    Je n’utilise ni l’un ni l’autre ^^
    J’ajoute / retire une classe sur laquelle je mettrai un display: none si besoin.
    Ça me permet d’utiliser des css transform sur l’apparition et disparition de l’élément.

    Et si « un-jour-on-sait-jamais » je ne veux plus faire disparaitre l’élément mais plutôt le barrer, le griser etc… c’est réglé en CSS facilement.

  2. Manu dit :

    Pareil que Faz, j’utilise addClass/removeClass pour le mêmes raisons

  3. Mathieu dit :

    Tu fais comme Bootstrap qui est très propre là dessus. Ils accollent une classe .hide au besoin. C’est propre et efficace.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Articles liés