Jquery一些常见性能的问题
生活随笔
收集整理的這篇文章主要介紹了
Jquery一些常见性能的问题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1 亂用選擇器
坑人指數(shù):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 全局選擇效率低
坑人指數(shù):100
盡量使用上下文(context)查找,避免全局選擇的使用。全局選擇器會進行整個Doc的查找,效率很低。
//錯誤的寫法$(".active").method();//正確的寫法var ul = $("#myList"); $(".active",ul).method();3 復制匿名函數(shù)
坑人指數(shù):50
避免多次復制匿名函數(shù)的寫法,將匿名函數(shù)分離出來,供其它對象多次調用。
//錯誤的寫法$('#myDiv').click( function(){ ? //一些操作});//正確的寫法function divClickFn (){ ? //一些操作 ? } $('#myDiv').click( divClickFn );4 誤用ajax的complete
坑人指數(shù):30
當用ajax進行數(shù)據(jù)請求時,避免使用complete回調方法,而應該使用success方法。complete回調在請求成功或失敗都會觸發(fā)。
//錯誤的寫法$.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 鏈式調用的誤用
坑人指數(shù):20
采用鏈式調用的方式會使對象在漸變未完成之前就被移除,即remove方法會在fadeOut方法完成之前調用。當需要第一方法完成之后,再執(zhí)行第二個方法,請使用回調,即第二種方式。
//錯誤的寫法$("#myDiv").click(function(e) {$(this).fadeOut("slow").remove(); });//正確的寫法$("myDiv").click(function(e){$(this).fadeOut("slow", function(){$(this).remove();}); });6 事件多次綁定
坑人指數(shù):20
如果你綁定(bind)同一事件多次,響應就會被執(zhí)行多次。為避免多次執(zhí)行,請先做事件解綁再重新綁定。
//避免響應多次執(zhí)行$("myDiv").unbind("click").bind("click");7 錯誤使用this指示符
坑人指數(shù):10
this指示符存在于一定的上下文中的,當上下文變化時this指向不同的對象。如果還想調用原上下文中的this,則需要在原上下文中緩存原this對象( $that = $(this) )。
//錯誤的寫法$( "#myList").click( function() {$(this).method(); $("#myList li").each( function() { ? ? ?//this并不指向myList$(this).method2(); }) });?
總結
以上是生活随笔為你收集整理的Jquery一些常见性能的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端利用CryptoJS进行AES对称加
- 下一篇: 程序根据手机机型设置自定义底部导航距离