13-jQuery性能優化

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文件裏面的註釋、空白

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章