提升效率的JQUERY

標籤：利用   dom   優先   length   事件   綜合   cdn   val   []   

摘要

本文部分整理了JQuery效能提升的一些方法，內容綜合自artzstudio，viralpatel，htmlgoodies等網站，希望對大家有所協助。這些規則雖然簡單，但如果不遵循就會影響程式執行效率，增加瀏覽器的負擔。

1 優先使用ID選取器和以ID開頭的選取器

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

 

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

//元素(tag)選取器效率僅次於ID選取器，優於類(class)選取器$("#myList li.active")

 

3 緩衝JQuery對象

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

 

4 利用鏈式命令，減少代碼量

//鏈式命令，減少代碼量$("#myList li").css(‘border‘,‘3px‘)               .css(‘color‘,‘red‘);

 

5 使用子查詢

//一次全域尋找加兩次子查詢優於兩次全域尋找var $list = $("#myList");var $actives = $list.find(‘li.active‘);var $in_actives = $list.find(‘li.in_active‘);

 

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

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

 

7 許多節點調用相同的函數時，利用事件委託

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

 

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

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

 

9 較長的字串拼接不要使用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迴圈，不要使用$.each迴圈

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

 

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

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

 

12 函數總是返回false

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

 

13 使用html5的data屬性

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

 

14 使用最新的版本及CDN15 壓縮你的JS代碼16 保持代碼規範整潔

提升效率的JQUERY（轉）