qui est un plus cher à appeler? afficher-masquer un nœud dom ou créer-supprimer un nœud dom

Quel est le plus cher à appeler?

  1. montrer-masquer le nœud dom ou
  2. création-suppression de nœud dom

Supposons qu’il ne rest plus qu’à manipuler 1 nœud ou quelques nœuds (moins de 5) et que l’application s’exécute sur le bureau.

Pour un petit nombre, est-ce même important? Et pour les applications mobiles?

La différence entre les deux sera infiniment petite pour seulement quelques éléments – elle peut absolument être considérée comme négligeable.

Cela dit, afficher et masquer l’élément via CSS sera plus rapide si vous n’utilisez pas les .show() et .hide() . La .hide() de jQuery est beaucoup plus lente que toute autre méthode permettant de masquer un élément. Si vous souhaitez savoir pourquoi, lisez le “Pourquoi le .hide() plus lent?” section au bas de ma réponse.

Quoi qu’il en soit, vous devez prendre votre décision en fonction de la méthode qui convient le mieux à vos besoins. Si vous n’avez plus jamais besoin de l’élément, vous pouvez également le supprimer. Si vous ne voulez pas le cacher pendant un moment ou dans certaines conditions, affichez-le / cachez-le.

Mais si vous voulez le tester vous-même, le voici 🙂


Pourquoi .hide() plus lent?

.hide() de jQuery est fondamentalement identique à l’utilisation de .css('display','none') sauf qu’il met en cache la valeur précédente du style d’ display . Ainsi, lorsque vous appelez .show() , votre élément sera correctement inversé. regarder exactement la même chose que ce qu’il a fait. S’il y avait display:inline , il l’aura quand il sera montré à nouveau. Si elle avait display:block , elle aurait display:block . Cela peut être très utile.

Voici un exemple:

Disons que nous avons un div avec id = “myDiv” et il est stylé dans un fichier externe avec display:inline . Nous voulons le cacher.

Avec la méthode .css , nous ferions ceci:

 $('#myDiv').css('display','none'); 

et plus tard, un de vos collègues développeurs voudra le montrer à nouveau sous certaines conditions. Il n’aura aucune idée de ce que devrait être la propriété display , car le css est quelque part dans un fichier externe. La plupart des développeurs display:block par défaut display:block , comme ceci:

 $('#myDiv').css('display','block'); 

Cependant, dans ce cas, nous aurions un style totalement différent, puisqu’il était à l’origine en inline . Un développeur intelligent n’aura aucun problème à comprendre ce qui ne va pas, mais tous les développeurs ne sont pas intelligents 🙂

Avec .show() et .hide() , cela devient un problème. Nous ne nous soucions pas de quel style il avait . Nous voulons juste qu’il soit là où il était, et c’est exactement ce qu’il va faire.