javascript - Comparaison de l'efficacité d'exécution de ces deux morceaux de code JS

Question

Environnement de test

百度首页
谷歌浏览器控制台

La raison pour laquelle je soulève cette question est à cause d'un message d'avertissement de webstorm.

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    console.log($('#result_logo').text());
    console.log($('#result_logo').html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

Le code ci-dessus signalera un avertissement à la fin du webstorm. Les informations d'avertissement sont les suivantes :

Checks that jQuery selectors are used in an efficient way. 
It suggests to split descendant selectors which are prefaced with ID selector 
and warns about duplicated selectors which could be cached.

D'après le message d'erreur, la solution que j'ai trouvée est d'utiliser des variables pour remplacer les objets JS obtenus par le même sélecteur

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    var result_logo=$('#result_logo');
    console.log(result_logo.text());
    console.log(result_logo.html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

Bien sûr, il n’y a aucun avertissement de cette façon.
Comme le code mentionne l'efficacité d'exécution, j'ai également testé la durée d'exécution de ces deux morceaux de code
La même opération a été exécutée 10 000 fois et testée trois fois. La durée d'exécution totale du premier morceau de code était respectivement de 1372, 1339 et 1423.
Le deuxième morceau de code La durée d'exécution totale est respectivement de 1407, 1277 et 1403. Après les tests, bien qu'il n'y ait aucun avertissement, l'efficacité d'exécution n'a pas été améliorée.

Et j'ai récemment effectué un stage dans une entreprise. J'ai regardé le code de l'entreprise, et il n'y avait rien de similaire à mon deuxième code. Il y avait d'innombrables codes qui effectuaient des opérations de sélection à plusieurs reprises.

Mon problème est le suivant : l'optimisation de mon deuxième code n'est pas du tout nécessaire. Au contraire, avoir une variable supplémentaire augmente virtuellement la difficulté de maintenance.

---

Lisez la réponse ci-dessous :

Ajoutez un test pour le code suivant

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    console.log($('#result_logo').text());
    console.log($('#result_logo').html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

Les résultats des trois tests sont : 1338 1348 1404. Toujours aucune amélioration.

Answer 1

Ce qui ne va pas a été souligné par d'autres réponses.
Permettez-moi de dire une chose, la raison pour laquelle vous ne constatez pas d'amélioration significative de l'efficacité est que le compilateur l'optimise pour vous. En fait, la plupart de ces erreurs de bas niveau peuvent être optimisées, par exemple, si vous les déclarez. une variable à plusieurs reprises, elle sera optimisée une fois si vous la déclarez 100 millions de fois, il n'y aura aucune différence en termes d'exécution.
Ce qui peut réellement affecter les performances de js n'est pas un si petit point, mais cela ne signifie pas que vous pouvez l'ignorer, car l'amélioration de la réflexion sur le codage est bien plus importante que cette petite amélioration des performances.

Answer 2

var result_logo=$('#result_logo') doit être écrit en dehors du corps de la boucle. Lors de l'écriture du code js, essayez de mettre en cache les objets jquery qui ne changeront pas
Le code de votre projet a de nombreuses méthodes d'écriture répétées, ce qui ne signifie pas que cela. est optimale.

Answer 3

Si vous êtes comme ça :

var res = document.querySelector("#result_logo");
console.log(res.innerHTML);
console.log(res.outerHTml);

Cela peut être optimisé. Mais la variable que vous écrivez est toujours un objet jquery. L'utilisation de variables et $() est la même

.

Answer 4

Les navigateurs modernes ont tous été optimisés pour vous. Pour véritablement tester l'efficacité, vous pouvez essayer IE8 9 et 10 pour voir si la différence est grande. De plus, votre sélecteur est un sélecteur d'identifiant, qui est plus rapide si vous le remplacez par un sélecteur de classe, la comparaison d'efficacité apparaîtra.

Answer 5

Les éléments que vous imprimez seront les mêmes à chaque utilisation, le mécanisme de mise en cache de Chrome a été optimisé

Answer 6

Je pense que la raison de l'erreur réside dans cette phrase : warns about duplicated selectors which could be cached., essayez d'écrire la déclaration de variable en dehors de la boucle

Answer 7

Vous avez écrit le code pour obtenir des étiquettes et déclarer des variables dans le corps de la boucle, ce qui n'a certainement pas amélioré les choses.

var startTime=new Date().getTime(),
    result_logo=$('#result_logo');
for(let i=0;i<10000;i++){
    console.log(result_logo.text());
    console.log(result_logo.html());
}
var endTime=new Date().getTime(),
    myTime=endTime-startTime;
myTime;

Théoriquement, écrire de cette façon peut améliorer un peu les choses, mais votre méthode de test n'est pas du tout scientifique et ne peut pas refléter pleinement l'efficacité du code. En plus de dépendre de l'efficacité du code, cela est également lié à la vitesse du réseau et les résultats reflétés ne sont pas précis.