jQuery效能最佳化

標籤：tle   代理   neu   idt   over   margin   target   畢業   name   

 

jquery效能最佳化

　　作為一個剛畢業的小白，剛剛工作了一段時間，因為工作地區的原因又開始使用jquery了，工作中遇到了一些效能最佳化的問題，所以特意總結下來，作為我的第一篇部落格小小留個念想的。

　　

　　1.選擇合適的選取器

　　$(‘#id‘)

　　在jQuery中使用id定位DOM元素是最快的，因為它直接來自於JavaScript的getElementById()方法。  　　　　　　　　　　

　　$("div")

　　在jQuery中使用元素選取器定位DOM元素是也是不錯的，因為將直接調用document.getElementByTagName()方法　　　　

　　$("[attribute=value]")

　　屬性選取器使用的是querySelectorAll()方法，目前幾乎主流瀏覽器均支援了他們。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 

　　$(".class")

　　在jQuery中使用元素選取器定位DOM元素是不推薦，因為將直接調用document.getElementByClassName()方法,對於IE8或更早的版本支援的不好。

　　$(":animated")

　　利用屬性來定位DOM元素的方式，沒有原生的方法，jquery需要搜尋所有的元素來的因為這個方式，效能很差。

　　

　　2.將對象緩衝起來

$("#id").css("width","100px");$("#id").bind("click",function(){});

 

　　以前沒有實際開發的時候用jquery寫過這種代碼，jquery會在建立每一個選取器的時候，尋找DOM，建立多個jquery對象

let $id = $("#id")$id.css("background-color","red")    .fadeIn("slow")

　我們應該將對象緩衝進一個變數然後再操作。

 

　3.採用find()，而不使用上下文尋找

　　如果一個頁面有許多DOM節點時，.find()函數會快一些：

 

　4.合理利用HTML5的Data 屬性

　　HTML的data屬性可以協助我們插入資料。jquery的data（）方法，可以有效利用HTML5的屬性，來自動得到資料

<div id="a1" data-value = ‘hello‘ data-obj=‘{"name":"lixiaolong"}‘></div>

 

好了，我們看一下.data()的效果吧

$(‘#a1‘).data("value")  //"page"$(‘#a1‘).data("obj").name //"lixiaolong"        

 

　5.盡量使用原生的javascript方法

　下面一段代碼，它用來判斷多選框是否被選中

var $cr = $("#cr")$cr.click(function(){if($cr.is(":checked")){alert("感謝你的支援！你可以繼續操作!")})

　　它使用了jquery提供的is（）方法來判斷多選框是否選中，但這裡可以使用原生的JavaScript方法，看下面代碼：

var $cr = $("#cr")var cr = $cr.get(0)   //DOM對象$cr.click(function(){if(cr.checked){alert("hello")}})

　　第二種效率高於第一種的方式，因為它不需要拐彎抹角的調用許多函數。

　　

　　6. 使用直接函數，而不要使用與與之等同的函數

　　為了獲得更好的效能，你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因為後面的幾個將會調用$.ajax()。

　　

　　7.數組方式使用jquery對象

　　在效能方面，建議使用簡單的for迴圈，或者while迴圈來處理，而不是$.each(),這樣效能能最佳化一點

$.each(array,function(index){array[index] = index ;})

　使用for代替each（）方法：

var arr = [] ;for(var i = 0 ;i<arr.length ; i++ ) {array[i] = i ;}

　　

　　8.事件代理

　　JavaScript事件都會冒泡到父元素上。比如我們給li加樣式的時候就可以加到ul上

$("li").click(function(){$(this).css("background","red")})

　　這樣綁定效率不高，我們只用向父元素繫結一次事件，然後通過event.target或取到點擊的當前元素：

$("#table ul").clicked (function(e){var $clicked = $(e.target); //捕捉到觸發的元素    $clicked .css({"background","red"});})

　　

　　9.壓縮js檔案

　　可以使用javascript壓縮公用程式進行，如使用JSMin,YUI Compressor，或者JS Compressor 。

　　

 

　　

　　

 

 

 

 

 

 

 

 

  

 

　

　　

 

 

　　

　　

 

 

 

 

 

 

 

 

  

jQuery效能最佳化