13、JQuery性能優化
1、使用最新版的jQuery類庫
2、使用合適的選擇器
$(#id)
使用id來定位DOM元素是最佳的方式,爲了提高性能,建議從最近的ID元素開始往下搜索
$("p") , $("div") , $("input")
標籤選擇器性能也不錯,它是性能優化的第二選擇。因爲jQuery將直接調用本地方法document.getElementsByTagName()來定位DOM元素
$(".class")
建議有選擇性的使用
$("[attribute=value]")
對這個利用屬性定位DOM元素,本地JavaScript並沒有直接實現。這種方式性能並不是很理想。建議避免使用。
$(":hidden")
和上面利用屬性定位DOM方式類似,建議儘量不要使用
注意的地方
儘量使用ID選擇器
儘量給選擇器指定上下文
3、緩存對象
如果你需要在其他函數中使用jQuery對象,你可以把他們緩存在全局環境中
4、數組方式使用jQuery對象
使用jQuery選擇器獲取的結果是一個jQuery對象。在性能方面,建議使用for或while循環來處理,而不是$.each()
5、事件代理
A、每一個JavaScript事件(如:click、mouseover)都會冒泡到父級節點。當我們需要給多個元素調用同個函數時這點很有用。比如,我們要爲一個表單綁定這樣的行爲:點擊td後,把背景顏色設置爲紅色
a、$("#myTable td").click(function(){$(this).css("background","red");});
假設有100個td元素,在使用以上的方式時,綁定了100個事件,將帶來性能影響
b、代替這種多元素的事件監聽方法是,你只需向他們的父節點綁定一次事件,然後通過event.target獲取到點擊的當前元素
$("#myTable td").click(function(){$(e.target).css("background","red")});
e.target捕捉到觸發的目標
c、在jQuery1.7中提供了一個新的方法on(),來幫助你將整個事件監聽封裝到一個便利的方法中
$("#myTable td").on("click",'td',function(){$(this).css("background","red");});
B、將你的代碼轉化成jQuery插件
它能夠使你的代碼有更好的重用性,並且能夠有效的幫助你組織代碼
6、使用join()方法來拼接字符串
也許你之前使用+來拼接字符串,現在可以改了。它確實有助於性能優化,尤其是長字符串處理的時候
7、合理使用HTML5和Data屬性
A、HTML5的data屬性可以幫助我們插入數據,特別是後端的數據交換。jQuery的Data()方法有效利用HTML5的屬性
a、例如:
<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>
b、爲了讀取數據,你需要使用如下代碼
$("#dl').data("role';//page)
$("#dl').data("lastValue';//43)
$("#dl').data("options';//john)
B、儘量使用原生的JavaScript方法
C、壓縮JavaScript代碼
一方面使用Gzip;另一方面去除JavaScript文件裏面的註釋、空白