DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery性能優化的幾點建議
JQuery性能優化的幾點建議
編輯:JQuery特效代碼     

針對jquery性能優化這個主題,想必大家都有所了解。下面是我搜集點一點資料關於jquery性能優化,大家可以參考參考。

一、選擇器性能優化建議

 1. 總是從#id選擇器來繼承:這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了;

 2. 在class前面使用tag:jQuery中第二快的選擇器就是tag選擇器(如$(‘head')),因為它和直接來自於原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(並且不要忘了就近的ID);

 3. 使用子查詢:將父對象緩存起來以備將來的使用;

 4. 采用find(),而不使用上下文查找;

 5. 利用強大的鏈式操作:采用jQuery的鏈式操作比緩存選擇器更有效;

二、優化DOM操作建議

 1.緩存jQuery對象: 將你經常用的元素緩存起來;

 2. 當要進行DOM插入時,將所有元素封裝成一個元素:
  這裡的基本思想是在內存中建立你確實想要的東西,然後更新DOM。這並不是一個jQuery最佳實踐,但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢
  直接的DOM操作很慢。盡可能少的去更改HTML結構。

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

 4. 緩存jQuery結果,以備後來使用:
  你經常會獲得一個javasript應用對象——你可以用App.來保存你經常選擇的對象,以備將來使用;

三、關於優化事件性能的建議

 1.推遲到$(window).load:
  有時候采用$(window).load()比$(document).ready()更快,因為後者不等所有的DOM元素都下載完之前執行。你應該在使用它之前測試它。

 2.使用Event Delegation:
  當你在一個容器中有許多節點,你想對所有的節點都綁定一個事件,delegation很適合這樣的應用場景。使用Delegation,我們僅需要在父級綁定事件,然後查看哪個子節點(目標節點)觸發了事件。當你有一個很多數據的table的時候,你想對td節點設置事件,這就變得很方便。先獲得 table,然後為所有的td節點設置delegation事件

四、其他常用jQuery性能優化建議

  1. 使用最新版本的jQuery
  最新的版本往往是最好的。更換了版本後,不要忘記測試你的代碼。有時候也不是完全向後兼容的。

  2. 使用HMTL5
  新的HTML5標准帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷,以及更優良的載入性能。所以如果可能的話請使用HTML5。

  3. 如果給15個以上的元素加樣式時,直接給DOM元素添加style標簽
  要給少數的元素加樣式,最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素添加樣式時,直接給DOM添加style 標簽更有效些。這個方法可以避免在代碼中使用硬編碼(hard code)。

    4. 避免載入多余的代碼
  將Javascript代碼放在不同的文件中是個好的方法,僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選擇器。也便於管理代碼。

  5. 壓縮成一個主JS文件,將下載次數保持到最少
  當你已經確定了哪些文件是應該被載入的,那麼將它們打包成一個文件。用一些開源的工具可以自動幫你完成,如使用Minify(和你的後端代碼集成)或者使用JSCompressor,YUI Compressor 或 Dean Edwards JS packer等在線工具可以為你壓縮文件。我最喜歡的是JSCompressor。

  6. 需要的時候使用原生的Javasript
  使用jQuery是個很棒的事情,但是不要忘了它也是Javascript的一個框架。所以你可以在jQuery代碼有必要的時候也使用原生的Javascript函數,這樣能獲得更好的性能。

  7. 從Google載入jQuery框架
  當你的應用正式上線的時候,請從Google CDN載入jQuery,因為用戶可以從最近的地方獲取代碼。這樣你可以減少服務器請求,而用戶如果浏覽其他網站,而它也使用Google CDN的jQuery時,浏覽器就會立即從緩存中調出jQuery代碼。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved