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.
  • http://fabienzibi.com faz

    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.

    • http://www.nicolas-hoffmann.net/ Nicolas

      +1 pour cette méthode, et ça évite d’ajouter des styles en ligne au passage avec du JS.

    • http://www.eboyer.com Eroan

      C’est en effet la meilleure méthode…

  • Manu

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

  • http://www.mathieurobin.com/ Mathieu

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

Articles liés