Un guide simple pour démarrer avec jQuery_jquery

Présentation

jQuery peut être considéré comme la bibliothèque javascript légère la plus utilisée dans le domaine du développement Web. Non seulement les développeurs Web professionnels l'utilisent, mais de nombreux nouveaux développeurs Web ou passionnés du Web l'ont également facilement intégré en utilisant le développement jQuery. .

Et si vous voulez vous améliorer dans ce domaine, vous devez apprendre et comprendre les meilleures pratiques. Les meilleures pratiques sont des informations sur les dernières technologies et méthodes de développement progressivement établies avec le développement d'un certain domaine technique. Elles sont également très utiles dans le domaine du développement Web.

Le contenu de cet article fait référence aux trucs et astuces sur les performances jQuery de l'excellent ingénieur front-end Addy Osmani. Si vous êtes intéressé, vous pouvez également jeter un œil au discours de ce maître PPT lui-même. équipe principale de jQuery (équipes jQuery Core) l'un des membres.
Pourquoi devez-vous suivre les meilleures pratiques de jQuery

La recherche de la performance dans le domaine du développement web ne s'arrêtera jamais. Bien que jQuery soit un outil de développement très puissant, une utilisation inappropriée entraînera toujours un travail et une charge supplémentaires pour le navigateur, et entraînera également que l'application Web développée occupera plus de ressources système et s'exécutera plus lentement. Et nous savons tous qu’une bonne application Web doit être fraîche et flexible.

Comment juger les performances de javascript ? Désormais, ce type de test de performances peut être résumé par la vitesse d'exécution. En termes simples, si une certaine méthode d'écriture s'exécute plus rapidement qu'une autre méthode d'écriture pour la même fonction, alors cette méthode d'écriture peut obtenir de meilleures performances. Bien entendu, cela n’est considéré que du point de vue des performances et n’inclut pas la maintenabilité du code. Si vous souhaitez tester vous-même les performances de différents extraits de code JavaScript, il est recommandé d'utiliser jsPerf.com. Ce site peut vous aider à créer facilement des cas de test de performances JavaScript, ainsi qu'à enregistrer et partager les résultats des tests. L'équipe jQuery l'utilise également pour les tests de performances JavaScript.
Suggestions d'utilisation de jQuery
1. Utilisez la dernière version

L'API fournie par la nouvelle version de jQuery améliorera les performances et corrigera certains bugs existants. Étant donné que de nombreux sites Web utilisent jQuery, les modifications apportées à chaque nouvelle version de jQuery seront soumises à des tests très stricts et les mises à niveau ne posent généralement pas de problèmes.

De plus, la nouvelle version de jQuery peut apporter des modifications très utiles à l'API pour faciliter le travail de développement. Par exemple, avant jQuery 1.7, la liaison d'événements utilisait les méthodes bind(), délégué() et live(). Bien qu'il s'agisse toutes de liaisons d'événements, chaque méthode a son propre objectif, ce qui crée le problème de savoir « quand dois-je utiliser laquelle ? » À partir de jQuery 1.7, deux nouvelles méthodes, on() et off(), sont ajoutées et recommandées pour terminer toutes les liaisons et suppressions d'événements, ce qui les rend beaucoup plus faciles à comprendre.
2. Comprenez vos sélecteurs

Dans jQuery, tous les sélecteurs (Selectors) ne sont pas également performants. En d'autres termes, même si vous pouvez sélectionner certains éléments à l'aide de nombreuses méthodes d'écriture de sélecteur différentes, ne pensez pas qu'ils sont également identiques en termes de performances.

Les sélecteurs de jQuery fonctionnent à différentes vitesses, du plus rapide au plus lent :

• Sélecteur d'ID ($(#ElementId))
• Sélecteur d'élément ($(form), $(input), etc.)
• Sélecteur de classe ($(.someClass))
• Pseudo-classes et sélecteurs d'attributs ($(:hidden), $([attribute=value]), etc.)

Étant donné que les méthodes de fonctionnement natives du DOM prises en charge par le navigateur (telles que document.getElementById()) sont disponibles, le sélecteur d'ID et le sélecteur d'élément sont les plus rapides. Le sélecteur de classe légèrement plus lent est dû au fait que IE6-IE8 ne prend pas en charge la fonction native getElementsByClassName(), mais dans d'autres navigateurs modernes prenant en charge cette méthode native, le sélecteur de classe est toujours très rapide.

Quant aux pseudo-classes et sélecteurs d'attributs les plus lents, c'est parce que le navigateur ne fournit pas de méthodes natives disponibles pour les fonctions correspondantes. Bien que jQuery ait essayé d'utiliser querySelector() et querySelectorAll(), deux API de sélection natives (appartenant à l'API de requête CSS) pour améliorer les performances de certains sélecteurs jQuery dans certains navigateurs modernes, dans l'ensemble, ils sont encore relativement lents. Bien sûr, cela est également dû au fait que jQuery a des exigences API plus élevées pour les pseudo-classes et les sélecteurs d'attributs. Il doit non seulement prendre en charge input[type="text"], un sélecteur légal en CSS, mais également prendre en charge p:first pour les éléments Filter. , mais c'est un sélecteur illégal en CSS. En bref, les pseudo-classes et les sélecteurs d'attributs de jQuery sont très puissants, mais veuillez les utiliser avec prudence.
3. Mettez en cache les éléments que vous exploitez

var parents = $('.parents');
var children = $('.parents').find('.child'); //bad

La mise en cache fait référence à la sauvegarde des résultats de retour des sélecteurs jQuery afin qu'ils puissent être rappelés ultérieurement. Chaque $('.whatever') effectuera une nouvelle recherche dans le DOM et renverra une collection jQuery, afin d'éviter la réutilisation.

En JavaScript natif, l'établissement de variables locales pour mettre en cache des données ou des objets est bénéfique pour rationaliser le code et optimiser les performances. Le même principe s’applique ici.
4.Syntaxe de la chaîne

var parents = $('.parents').doSomething().doSomethingElse();

jQuery中大部分方法都返回jQuery包装集并支持这种链式语法。javasript的性能优化要点之一是最小化语句数，因此链式语法不仅写起来更容易，运行起来也会更快。
5.使用事件代理

利用事件冒泡，指定一个位于dom较高层级的元素（比如document）的事件处理程序，就可以管理某一类型的所有事件。减少了页面中添加的事件处理程序，自然可以提升整体性能。
6.最小化现场更新

如果你进行操作的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。现场更新需要浏览器重新计算尺寸，涉及到重绘（repaint）和回流（reflow），有较高的性能花费，因此应减少使用。

在新增内容时，建议先把要新增的代码段合并完全，最后再使用单个append()方法添加到页面。而如果元素存在复杂的交互，比如反复地添加和移除，detach()这个针对性的方法就是最佳的选择。
7.不在不必要的时候使用jQuery方法

$('.nav_link').bind('click', function() {
  console.log('nav id: ' + $(this).attr('id'));  //bad

$.data(elem, key, value);  //significantly faster

};

jQuery方法不一定是最好的方法。这里使用$(this).attr('id')获取当前事件元素的ID，为当前事件元素创建了jQuery包装集，然后调用attr()属性获取方法。但这都是额外的性能花费。事实上，this在事件函数内就表示当前事件元素，直接使用this.id就可以获取元素ID，这种原生DOM属性的写法要更快。
8.适当使用jQuery工具函数

操作jQuery包装集的方法（也就是写在$.fn中的方法），其中一部分也有作为jQuery工具函数（直接写在$中的方法）的同类方法。由于jQuery工具函数在使用中不涉及创建jQuery包装集，因此，在部分情况下，可以通过换用jQuery工具函数提升性能。

比如，在DOM中存储数据，一般的做法是：

$('#elem').data(key, value);  //common way

但改为下边的写法会快很多：

需要的注意的是，虽然下面这种方法更快，但作为参数传入的元素不能用选择符，而要用元素本身。
结语

我自己整理和写本文内容时，也感觉很有收获。jQuery是一个很强大的工具，但进一步说，也只提供了web开发的最基本的内容，更高级更复杂的内容，还需要自己不断学习和创作。在这个过程中，遵循最佳实践，养成良好的习惯，会有很大的益处，并逐渐做得更出色！