Explication détaillée de l'optimisation des performances Jquery

Explication détaillée de l'optimisation des performances Jquery_jquery

WBOY

Libérer： 2016-05-16 16:48:02

original

1169 Les gens l'ont consulté

Après avoir cherché et cherché, j'ai finalement trouvé quelques articles sur l'optimisation des performances de jquery. L'éditeur les a rassemblés de manière décisive et bien sûr, je n'ai pas pu oublier d'ajouter certains de mes propres résumés et compréhensions.

Tout d'abord, l'opération de chaîne jquery dans l'article précédent est l'une des méthodes d'optimisation des performances jquery. La mise en œuvre spécifique et les avantages ne seront pas répétés ici. Deuxièmement, l'optimisation jquery est la même que certaines méthodes d'optimisation Web.

a.Compresser js. Utilisez la technologie de compression de code pour réduire la taille du fichier. (En utilisant jsmin, YUI Compressor, etc.).

b. Les événements bouillonnent vers le haut par défaut. Les événements qui se produisent dans les nœuds enfants peuvent être gérés par les nœuds parents. Placez l'enregistrement des événements sur le nœud parent, il n'est donc pas nécessaire d'enregistrer des écouteurs d'événements pour chaque nœud enfant.

c. Grâce à la mise en cache, lorsqu'un objet jquery est utilisé plusieurs fois, l'objet jquery peut être mis en cache dans une variable.

Copier le code Le code est le suivant :

var nodeTd = $("table td" );
var $cj = $("#cj");

$cj.on("click",function(){
$cj.css("color","blue");})

Cache des résultats jquery. Si vous devez utiliser l'objet résultat jquery ailleurs dans le programme, ou si la fonction sera exécutée plusieurs fois, vous pouvez le stocker dans une variable.

d. Essayez d'hériter du sélecteur d'identifiant. En raison du caractère unique de l'identifiant, la sélection de l'identifiant est le moyen le plus rapide de sélectionner un élément dans jquery.

Copier le code Le code est le suivant :

$("#firstd").slideDown (500) ;
$("#firstd img").slideUp(500);//Utiliser l'héritage du sélecteur d'identifiant pour sélectionner plusieurs éléments

e. Utiliser la sous-requête

Copier le code Le code est le suivant :

 zhuye.on("swiperight"," #data li ",function(){
                                                                                                                                            
f. Utilisez find(), qui n'utilise pas de recherche contextuelle. La fonction .find() est plus rapide et a été utilisée dans e ci-dessus.

g. Utilisez la fonction interne de jquery data() pour stocker l'état (cette méthode d'optimisation des performances a été vue pour la première fois sur Baidu, citons donc directement son exemple pour le moment).

Copier le code Le code est le suivant :$('#head').data ('name ', 'value');

// Puis appelez-le dans votre application :

$('#head').data('name');

h. Enfin, utilisez la nouvelle version de jQuery et simplifiez le code jquery.

Copier le code Le code est le suivant :$(document).ready(function ( ){

});

$(function (){
});