Instructions détaillées sur l'optimisation du code dans jQuery

Cet article résume les méthodes d’optimisation du code jQuery pour tous. Si vous avez des besoins dans ce domaine, apprenons ensemble.

Utilisez le bon sélecteur

Dans jQuery, vous pouvez utiliser plusieurs sélecteurs pour sélectionner le même élément de page Web. Les performances de chaque sélecteur sont différentes et vous devez comprendre leurs différences de performances

1 Le sélecteur le plus rapide : sélecteur d'identifiant et sélecteur d'étiquette d'élément

Par exemple, les instructions suivantes avec les meilleures performances. :

$('#id')
$('form')
$('input')

Lorsqu'il rencontrera ces sélecteurs, jQuery appellera automatiquement les méthodes natives du navigateur (telles que getElementById()), leur vitesse d'exécution est donc rapide.

2. Sélecteur plus lent : les performances du sélecteur de classe

$('.className') dépendent des différents navigateurs. Les navigateurs Firefox, Safari, Chrome et Opera ont tous des méthodes natives getElementByClassName(), donc la vitesse n'est pas lente. Cependant, IE5-IE8 n'ont pas déployé cette méthode, donc ce sélecteur sera assez lent dans IE

3 Le sélecteur le plus lent : le sélecteur de pseudo-classe et le sélecteur d'attribut

Rechercher pour supprimer tout ce qui est caché. éléments dans une page Web, vous devez utiliser un sélecteur de pseudo-classe :

$(':hidden')

Un exemple de sélecteur d'attribut est :

$('[attribute=value]')

Ces deux instructions sont les plus lentes, car le navigateur n'a pas de méthode native pour eux. Cependant, certaines nouvelles versions de navigateurs ont ajouté les méthodes querySelector() et querySelectorAll(), ce qui améliorera grandement les performances de ce type de sélecteur

Comprendre la relation parent-enfant

Les six suivantes Les sélecteurs sélectionnent tous les éléments enfants des éléments parents

$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))

1. L'instruction suivante signifie, étant donné un objet DOM, puis en sélectionner un élément enfant. jQuery convertira automatiquement cette instruction en $.parent.find('child'), ce qui entraînera une certaine perte de performances. C'est 5% à 10% plus lent que la forme la plus rapide

$('.child', $parent)

2. C'est la déclaration la plus rapide. La méthode .find() appellera les méthodes natives du navigateur (getElementById, getElementByName, getElementByTagName, etc.), donc c'est plus rapide

$parent.find('.child')

3. Cette instruction utilisera $.sibling( ) et nextSibling. () méthode de javascript, parcourez les nœuds un par un. Il est environ 50 % plus lent que le formulaire le plus rapide

$parent.children('.child')

4. jQuery utilise le moteur Sizzle en interne pour gérer différents sélecteurs. L'ordre de sélection du moteur Sizzle est de droite à gauche, donc cette instruction sélectionne d'abord .child, puis filtre l'élément parent #parent un par un, ce qui le rend environ 70 % plus lent que la forme la plus rapide

$('#parent > .child')

5. Cette affirmation est la même que la précédente. Cependant, la précédente ne sélectionne que des sous-éléments directs, tandis que celle-ci peut sélectionner des sous-éléments à plusieurs niveaux, elle est donc plus lente, environ 77 % plus lente que la forme la plus rapide

$('#parent .child')

6. Éléments internes de jQuery Cette instruction sera convertie en $('#parent').find('.child'), qui est 23 % plus lent que la forme la plus rapide

$('.child', $('#parent'))

Donc, le meilleur choix est $parent find. ('.enfant'). De plus, comme $parent est souvent généré lors de l'opération précédente, jQuery le mettra en cache, accélérant ainsi encore la vitesse d'exécution

N'abusez pas de jQuery

Peu importe la vitesse de jQuery, il ne peut pas rivaliser avec les méthodes natives par rapport aux méthodes javascript. Par conséquent, lorsqu’il existe des méthodes natives pouvant être utilisées, essayez d’éviter d’utiliser jQuery.

En prenant le sélecteur le plus simple comme exemple, document.getElementById("foo") est plus de 10 fois plus rapide que $("#foo")

Regardons un autre exemple, pour le un élément Lier une fonction qui gère les événements de clic :

$('a').click(function(){
　　　　alert($(this).attr('id'));
　　});

La signification de ce code est qu'après avoir cliqué sur un élément, l'attribut id de l'élément apparaîtra. Pour obtenir cet attribut, jQuery doit être appelé deux fois de suite, la première est $(this) et la seconde est attr('id').

En fait, ce traitement est totalement inutile. La façon la plus correcte de l'écrire est d'utiliser directement la méthode JavaScript native pour appeler this.id :

$('a').click(function(){
　　　　alert(this.id);
　　});

Selon le test, la vitesse de this.id est plus de 20 fois plus rapide que $( this).attr('id') Times

Cache bien

La sélection d'un certain élément de page Web est une étape très coûteuse. Par conséquent, vous devez utiliser le sélecteur le moins de fois possible et mettre en cache les résultats sélectionnés autant que possible pour une utilisation répétée à l'avenir.

Par exemple, la façon d'écrire suivante est mauvaise :

jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');

Une meilleure façon d'écrire est :

var cached = jQuery('#top');
　　cached.find('p.classA');
　　cached.find('p.classB');

Selon les tests, la mise en cache est plus rapide que pas de mise en cache. 2-3 fois

Une caractéristique majeure de jQuery est qu'il permet l'utilisation de l'écriture en chaîne

$('p').find('h3').eq(2).html('Hello');

Lorsque l'écriture en chaîne est utilisée, jQuery met automatiquement en cache les résultats de chaque étape. , c'est donc mieux que l'écriture sans chaîne. La formule doit être écrite rapidement. D'après les tests, la méthode d'écriture en chaîne est environ 25 % plus rapide que la méthode d'écriture sans chaîne (sans mise en cache)

Délégation d'événement

Le modèle d'événement de Javascript adopte le mode "bulle", également c'est-à-dire que les événements sur les éléments enfants "bouillonneront" d'un niveau et deviendront des événements sur l'élément parent.

Grâce à cela, la liaison d'événements peut être grandement simplifiée. Par exemple, il existe un tableau (élément table) contenant 100 cellules (élément td). Il est désormais nécessaire de lier un événement de clic (clic) à chaque cellule. Devez-vous exécuter la commande suivante 100 fois ?

$("td").on("click", function(){
　　　　$(this).toggleClass("click");
　　});

La réponse est non, il suffit de lier cet événement à l'élément table, car après qu'un événement click se produise sur l'élément td, l'événement "bulle" vers la table de l'élément parent. étant surveillé

因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件

$("table").on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});

更好的写法，则是把事件绑定在document对象上面

$(document).on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});

如果要取消事件的绑定，就使用off()方法

$(document).off("click", "td");

少改动DOM

1、改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法

如果要插入多个元素，就先把它们合并，然后再一次性插入。根据测试，合并插入比不合并插入，快了将近10倍

2、如果要对一个DOM元素进行大量处理，应该先用.detach()方法，把这个元素从DOM中取出来，处理完毕以后，再重新插回文档。根据测试，使用.detach()方法比不使用时，快了60%

3、如果要在DOM元素上储存数据，不要写成下面这样：

var elem = $('#elem');
elem.data(key,value);

而要写成

var elem = $('#elem');
$.data(elem[0],key,value);

根据测试，后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的，而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多

4、插入html代码的时候，浏览器原生的innterHTML()方法比jQuery对象的html()更快

尽量少生成jQuery对象

每当使用一次选择器（比如$('#id')），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象

举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法

既可以使用针对jQuery对象的版本：

var $text = $("#text");
var $ts = $text.text();

也可以使用针对jQuery函数的版本：

var $text = $("#text");
var $ts = $.text($text);

由于后一种针对jQuery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快

选择作用域链最短的方法

严格地说，这一条原则对所有Javascript编程都适用，而不仅仅针对jQuery

我们知道，Javascript的变量采用链式作用域。读取变量的时候，先在当前作用域寻找该变量，如果找不到，就前往上一层的作用域寻找该变量。这样的设计，使得读取局部变量比读取全局变量快得多

请看下面两段代码，第一段代码是读取全局变量：

var a = 0;
　　function x(){
　　　　a += 1;
　　}

第二段代码是读取局部变量：

function y(){
　　　　var a = 0;
　　　　a += 1;
　　}

第二段代码读取变量a的时候，不用前往上一层作用域，所以要比第一段代码快五六倍

同理，在调用对象方法的时候，closure模式要比prototype模式更快

prototype模式：

var X = function(name){ this.name = name; }
X.prototype.get_name = function() { return this.name; };

closure模式：

var Y = function(name) {
　　　　var y = { name: name };
　　　　return { 'get_name': function() { return y.name; } };
　　};

同样是get_name()方法，closure模式更快

使用Pub/Sub模式管理事件

当发生某个事件后，如果要连续执行多个操作，最好不要写成下面这样：

function doSomthing{
　　　　doSomethingElse();
　　　　doOneMoreThing();
　　}

而要改用事件触发的形式：

function doSomething{
　　　　$.trigger("DO_SOMETHING_DONE");
　　}
　　$(document).on("DO_SOMETHING_DONE", function(){
　　　　doSomethingElse(); 
  });

还可以考虑使用deferred对象

function doSomething(){
　　　　var dfd = new $.Deferred();
　　　　//Do something async, then... 
　　　　//dfd.resolve();
　　　　return dfd.promise();
　　}
　　function doSomethingElse(){
　　　　$.when(doSomething()).then(//The next thing);
　　}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在微信小程序中如何使用switch开关选择器

在JavaScript中如何计算多边形质心

在Angular19中有关自定义表单控件使用

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!