1 亂用選擇器

坑人指數：200

JQuery選擇器調用代價很大，反復調用效率更低。應采用緩存對象的方法或采用鏈式調用的方式。

//錯誤的寫法$("#button").click(function(){$('#list li').addClass('strong');$('#list li').css('color', 'red'); });//正確的寫法$("#button").click(function(){$lis = $('#list li');$lis.addClass('strong');$lis.css('color', 'red'); });//更好的寫法$("#button").click(function(){$('#list li').addClass('strong').css('color', 'red'); });

2 全局選擇效率低

坑人指數：100

盡量使用上下文（context）查找，避免全局選擇的使用。全局選擇器會進行整個Doc的查找，效率很低。

//錯誤的寫法$(".active").method();//正確的寫法var ul = $("#myList"); $(".active",ul).method();

3 復制匿名函數

坑人指數：50

避免多次復制匿名函數的寫法，將匿名函數分離出來，供其它對象多次調用。

//錯誤的寫法$('#myDiv').click( function(){ ? //一些操作});//正確的寫法function divClickFn (){ ? //一些操作 ? } $('#myDiv').click( divClickFn );

4 誤用ajax的complete

坑人指數：30

當用ajax進行數據請求時，避免使用complete回調方法，而應該使用success方法。complete回調在請求成功或失敗都會觸發。

//錯誤的寫法$.ajax({url: "http://tools.42du.cn/jsonp/student/all", }).complete(function( data ) { ? ?//一些操作 ?});//正確的寫法$.ajax({url: "http://tools.42du.cn/jsonp/student/all", }).success(function( data ) { ? ?//一些操作 ?});

5 鏈式調用的誤用

坑人指數：20

采用鏈式調用的方式會使對象在漸變未完成之前就被移除，即remove方法會在fadeOut方法完成之前調用。當需要第一方法完成之后，再執行第二個方法，請使用回調，即第二種方式。

//錯誤的寫法$("#myDiv").click(function(e) {$(this).fadeOut("slow").remove(); });//正確的寫法$("myDiv").click(function(e){$(this).fadeOut("slow", function(){$(this).remove();}); });

6 事件多次綁定

坑人指數：20

如果你綁定（bind）同一事件多次，響應就會被執行多次。為避免多次執行，請先做事件解綁再重新綁定。

//避免響應多次執行$("myDiv").unbind("click").bind("click");

7 錯誤使用this指示符

坑人指數：10

this指示符存在于一定的上下文中的，當上下文變化時this指向不同的對象。如果還想調用原上下文中的this，則需要在原上下文中緩存原this對象（ $that = $(this) ）。

//錯誤的寫法$( "#myList").click( function() {$(this).method(); $("#myList li").each( function() { ? ? ?//this并不指向myList$(this).method2(); }) });

?

總結

以上是生活随笔為你收集整理的Jquery一些常见性能的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。