L'arrivée de jQuery rend le processus d'écriture de JavaScript extrêmement simple. Cependant, vous remarquerez que de petites modifications apportées à votre code peuvent améliorer considérablement la lisibilité et/ou les performances. Voici quelques conseils pour vous aider à optimiser votre code.
Nous avons besoin d’une plateforme fiable pour les tests. Voici le balisage HTML de la page de test où nous exécuterons tous les tests :
<!DOCTYPE html> <html lang="en-GB"> <head> <title>Testing out performance enhancements - Siddharth/NetTuts+</title> </head> <body> <div id="container"> <div class="block"> <p id="first"> Some text here </p> <ul id="someList"> <li class="item"></li> <li class="item selected" id="mainItem">Oh, hello there!</li> <li class="item"></li> <li class="item"></li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> console.profile() ; // Our code here console.profileEnd(); </script> </body> </html>
Rien d'extraordinaire ici ; juste un tas d'éléments que nous pouvons cibler et tester. Nous utilisons Firebug pour enregistrer l'heure ici. profile démarre le processus, profileEnd arrête le processus et enregistre le temps passé sur la tâche. J'utilise habituellement la méthode de profil principale de Firebug, mais pour nos objectifs néfastes, cela suffira.
En règle générale, vous fournirez un seul fichier de script contenant le code de toutes les pages de votre site. Il s'agit généralement de code qui effectue fréquemment des opérations sur des éléments qui n'existent pas sur la page actuelle. Bien que jQuery gère ces problèmes avec beaucoup de grâce, cela ne signifie pas que vous pouvez ignorer les problèmes. En fait, si vous appelez les méthodes de jQuery sur une collection vide, elles ne s'exécuteront pas.
Il est recommandé d'exécuter uniquement le code qui s'applique à la page actuellement chargée, plutôt que de regrouper tout le code dans une seule vérification de l'état de préparation du document et de le transmettre au client.
Regardons la première scène :
console.profile();
var ele = $("#somethingThatisNotHere");
ele.text("Some text").slideUp(300).addClass("editing");
$("#mainItem");
console.profileEnd();
//Some more awesome, ground shattering code here ._.
Firebug génère les résultats suivants :
Cette fois, on vérifie si l'élément à opérer existe avant d'effectuer l'opération.
console.profile() ;
var ele = $("#somethingThatisNotHere");
if ( ele[0] ) {
ele.text("Some text").slideUp(300).addClass("editing");
}
$("#mainItem");
console.profileEnd();
//Some more awesome, ground shattering code here ._.
Résultat :
L'avez-vous vu ? C'est très simple, précis et fait le travail. Veuillez noter que vous n'avez pas besoin de vérifier si l'élément existe à chaque bit du code . Vous remarquerez que certaines sections plus grandes de la page bénéficient souvent de cette approche. Utilisez votre jugement ici.
Essayez d'utiliser une pièce d'identité au lieu de réussir les cours.
C'est un vaste sujet, je vais donc essayer d'être aussi concis que possible. Tout d’abord, lorsque vous passez le sélecteur, essayez d’utiliser l’ID au lieu de passer la classe. jQuery utilise directement la méthode native getElementById pour trouver un élément par ID, alors qu'avec une classe, il doit exécuter des manipulations internes pour l'obtenir, du moins dans les anciens navigateurs.
Nous examinerons les différents sélecteurs pouvant être utilisés pour cibler le deuxième élément li. Nous testerons chacun d’eux et comment ils modifient les performances.
La première façon, et la plus simple, consiste à le cibler explicitement en utilisant la classe selected. Voyons ce que renvoie le profileur de Firebug.
console.profile() ;
$(".selected");
console.profileEnd();
Résultat : 0,308 ms. Ensuite, nous ajoutons un préfixe au nom de la balise pour le affiner. De cette façon, nous pouvons affiner la recherche en ciblant d'abord uniquement les éléments DOM sélectionnés à l'aide de document.getElementsByTagName.
console.profile() ;
$("li.selected");
console.profileEnd();
Résultat : 0,291 ms. C'est environ 0,02 milliseconde de moins. Puisque nous avons testé sous Firefox, cela est négligeable ; il convient cependant de noter que ce gain de performances est nettement plus élevé dans les navigateurs plus anciens comme Internet Explorer 6.
Ensuite, nous commençons par l'ID de l'élément parent et descendons.
console.profile() ;
$("#someList .selected");
console.profileEnd();
Résultat : 0,283 ms. Essayons d'être un peu plus précis. En plus de l'ID de l'ancêtre, nous précisons également le type de l'élément.
console.profile() ;
$("#someList li.selected");
console.profileEnd();
Résultat : 0,275 millisecondes. Une petite partie a été rasée. Enfin, nous utilisons directement l’ID pour le localiser.
console.profile() ;
$("#mainItem");
console.profileEnd();
Résultat : 0,165 ms. Touchant! Cela vous montre vraiment à quel point les méthodes natives peuvent être exécutées rapidement. Notez que même si les navigateurs modernes peuvent tirer parti de fonctionnalités telles que getElementsByClassName, les navigateurs plus anciens ne le peuvent pas, ce qui entraîne des performances considérablement plus lentes. Tenez-en toujours compte lors du codage.
Sizzle, le moteur de sélection utilisé par jQuery - construit par John Resig - analyse les sélecteurs de droite à gauche, ce qui peut provoquer des chaînes d'analyse inattendues.
Considérez ce sélecteur :
$("#someList .selected");
当Sizzle遇到这样的选择器时，它首先构建DOM结构，使用选择器作为根，丢弃不具有所需类的项目，并且对于具有该类的每个元素，它检查其父元素是否具有ID 为 someList。
为了解决这个问题，请确保选择器最右侧的部分尽可能具体。例如，通过指定 li.selected 而不是 .selected，您可以减少必须检查的节点数量。这就是上一节中性能跳跃的原因。通过添加额外的约束，您可以有效地减少必须检查的节点数量。
为了更好地调整元素的获取方式，您应该考虑为每个请求添加上下文。
var someList = $('#someList')[0];
$(".selected", someList);
通过添加上下文，搜索元素的方式完全改变。现在，首先搜索提供上下文的元素（在我们的示例中为 someList），一旦获得该元素，就会删除不具有必需类的子元素。
请注意，将 DOM 元素作为 jQuery 选择器的上下文传递通常是最佳实践。当上下文存储在某个变量中时，使用上下文是最有帮助的。否则，您可以简化该过程并使用 find() —— jQuery 本身就是在幕后做的。
$('#someList').find('.selected');
我想说性能提升将会被明确定义，但我不能。我已经在许多浏览器上运行了测试，范围方法的性能是否优于普通版本取决于许多因素，包括浏览器是否支持特定方法。
当您浏览别人的代码时，您经常会发现。
// Other code $(element).doSomething(); // More code $(element).doSomethingElse(); // Even more code $(element).doMoreofSomethingElse();
请不要这样做。 永远。开发人员一遍又一遍地实例化这个“元素”。这是浪费。
让我们看看运行这样可怕的代码需要多长时间。
console.profile() ;
$("#mainItem").hide();
$("#mainItem").val("Hello");
$("#mainItem").html("Oh, hey there!");
$("#mainItem").show();
console.profileEnd();
如果代码的结构如上所示，一个接一个，您可以像这样使用链接：
console.profile();
$("#mainItem").hide().val("Hello").html("Oh, hey there!").show();
console.profileEnd();
通过链接，获取最初传入的元素，并将引用传递给每个后续调用，从而减少执行时间。否则每次都会创建一个新的 jQuery 对象。
但是，如果与上面不同，引用该元素的部分不是并发的，则您必须缓存该元素，然后执行与以前相同的所有操作。
console.profile() ;
var elem = $("#mainItem");
elem.hide();
//Some code
elem.val("Hello");
//More code
elem.html("Oh, hey there!");
//Even more code
elem.show();
console.profileEnd();
从结果中可以明显看出，缓存或链接大大减少了执行时间。
我之前的文章中建议进行非传统 DOM 操作，但在被证明性能提升确实值得之前，遭到了一些人的批评。我们现在将亲自测试一下。
对于测试，我们将创建 50 个 li 元素，并将它们附加到当前列表，并确定需要多少时间。
我们将首先回顾一下正常的、低效的方法。我们实质上是在每次循环运行时将元素附加到列表中。
console.profile() ;
var list = $("#someList");
for (var i=0; i<50; i++)
{
list.append('<li>Item #' + i + '</li>');
}
console.profileEnd();
让我们看看效果如何，好吗？
现在，我们将走一条稍微不同的道路。我们首先会将所需的 HTML 字符串附加到变量中，然后仅回流 DOM 一次。
console.profile() ;
var list = $("#someList");
var items = "";
for (var i=0; i<50; i++){
items += '<li>Item #' + i + '</li>';
}
list.append(items);
console.profileEnd();
正如预期的那样，所花费的时间显着减少。
如果您使用 jQuery 作为 getElementById 的替代品，但从未使用它提供的任何方法，那么您就做错了。
如果您想更进一步，问问自己是否真的需要创建一个新的 jQuery 对象来定位某些元素？如果您使用 jQuery 作为 document.getElementById 的替代品，但从未使用它提供的任何方法，那么您就做错了。在这种情况下，我们可以使用原始 JS。
console.profile() ;
var list = document.getElementById('someList');
var items = '';
for (var i=0; i<50; i++){
items += '<li>Item #' + i + '</li>';
}
list.innerHTML = items;
console.profileEnd();
您会注意到优化代码和未优化代码之间的执行时间差异只有几分之一毫秒。这是因为我们的测试文档非常小，节点数量少得令人难以置信。一旦您开始使用包含数千个节点的生产级站点，它就会真正增加。
另请注意，在大多数测试中，我只是访问元素。当您开始对它们应用适当的函数时，执行时间的增量将会增加。
我也明白这不是测试性能的最科学的方法，但是，为了大致了解这些变化对性能的影响程度，我认为这已经足够了。
Enfin, dans la plupart des applications web, la vitesse de connexion et le temps de réponse du serveur web associé ont un impact plus important sur les performances de l'application que les ajustements du code. Il s’agit néanmoins d’informations importantes et elles vous aideront lorsque vous tenterez d’obtenir autant de performances que possible de votre code.
Nous avons terminé. Voici quelques éléments à garder à l'esprit lorsque vous essayez d'optimiser votre code ; bien sûr, il ne s'agit pas d'une liste exhaustive d'ajustements, et ces points ne s'appliqueront pas nécessairement dans toutes les situations. Quoi qu’il en soit, je garderai un œil sur les commentaires pour lire vos réflexions sur ce sujet. Voyez-vous quelque chose qui ne va pas ici ? S'il vous plaît laissez-moi un commentaire ci-dessous.
Vous avez des questions ? Vous avez quelque chose de gentil à dire ? critiquer? Accédez à la section commentaires et laissez-moi un message. Bon codage !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment résoudre un synrax invalide
Que faire si la visionneuse de photos Windows manque de mémoire
Méthodes de chiffrement courantes pour le stockage de données chiffrées
Introduction aux logiciels vps gratuits étrangers
La différence entre scratch et python
Que signifie l'accès au réseau refusé au wifi ?
Le port 8080 est occupé
Solution d'erreur SQL 5120
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
