摘要

本文部分整理了JQuery性能提升的一些方法，內(nèi)容綜合自artzstudio，viralpatel，htmlgoodies等網(wǎng)站，希望對(duì)大家有所幫助。這些規(guī)則雖然簡(jiǎn)單，但如果不遵循就會(huì)影響程序執(zhí)行效率，增加瀏覽器的負(fù)擔(dān)。

---

1 優(yōu)先使用ID選擇器和以ID開頭的選擇器

//ID選擇器性能最佳 $("#myDiv") //以ID開頭，提高效率 $("#myDiv .red")

?

2 類選擇之前加元素選擇提高效率

//元素(tag)選擇器效率僅次于ID選擇器，優(yōu)于類(class)選擇器 $("#myList li.active")

?

3 緩存JQuery對(duì)象

//錯(cuò)誤，做了兩次選擇 $("#myList li").css('border','3px'); $("#myList li").css('color','red'); //緩存對(duì)象，提高效率 var $li = $("#myList li") $li.css('border','3px'); $li.css('color','red');

?

4 利用鏈?zhǔn)矫?#xff0c;減少代碼量

//鏈?zhǔn)矫?#xff0c;減少代碼量 $("#myList li").css('border','3px').css('color','red');

?

5 使用子查詢

//一次全局查找加兩次子查詢優(yōu)于兩次全局查找 var $list = $("#myList"); var $actives = $list.find('li.active'); var $in_actives = $list.find('li.in_active');

?

6 減少DOM的操作次數(shù)(DOM操作很慢)

//操作一次DOM，而不要操作100次 var lis = ""; for (var i=0, i<100; i++) {lis += '<li>' + i + '</li>'; } $('#myList').html(lis);

?

7 許多節(jié)點(diǎn)調(diào)用相同的函數(shù)時(shí)，利用事件委托

//效率較低 $('#myList li').bind('click', function(){ }); //效率較高 $('#myList').bind('click', function(e){if ($(e.target).nodeName === 'LI') {} });

?

8 把不重要的功能（如拖放，效果等）放在$(window).load執(zhí)行

//不要把所有都放在$(document).ready中 $(window).load(function(){// 在頁面所有對(duì)象加載完執(zhí)行 });

?

9 較長(zhǎng)的字符串拼接不要使用concat()，要使用join()

//join()比concat()效率更好 var list_items = []; for (var i=0; i<=10; i++) { list_items[i] = '<li>Item '+i+'</li>'; } $('#myList').html(list_items.join(''));

?

10 使用for循環(huán)，不要使用$.each循環(huán)

//js原生方法效率更好 var js_array = new Array (); for (var i=0; i<10000; i++) {js_array[i] = i; }

?

11使用元素前，先檢查其是否存在

//檢查id為myDiv的元素是否存在 if($("#myDiv").length) { }

?

12 函數(shù)總是返回false

$('#myDiv').click (function () {return false; });

?

13 使用html5的data屬性

//<div id="myDiv" data-value="111"></div> $("#myDiv").data("value");

?

14 使用最新的版本及CDN

15 壓縮你的JS代碼

16 保持代碼規(guī)范整潔

轉(zhuǎn)載于:https://www.cnblogs.com/acuier/p/6851785.html

總結(jié)

以上是生活随笔為你收集整理的提升效率的JQUERY（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。