搜尋
首頁web前端js教程【整理總結】優化jQuery效能的多種方法

如何最佳化jQuery效能?以下這篇文章為大家介紹一些針對 jQuery效能 的最佳化方法,希望對大家有幫助!

【整理總結】優化jQuery效能的多種方法

我一直在尋找有關jQuery效能最佳化方面的小技巧,能讓我那臃腫的動態網頁應用變得輕便。找了很多文章後,我決定將最好最常用的一些優化效能的建議列出來。 【推薦學習:jQuery影片教學

一、選擇器效能最佳化建議

##1、總是從#id選擇器來繼承

這是jQuery選擇器的一個黃金法則。 jQuery選擇一個元素最快的方法就是用ID來選擇了。

2、在class前面使用tag

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

jQuery中class選擇器是最慢的,因為在IE 瀏覽器 下它會遍歷所有的DOM節點。盡量避免使用class選擇器。也不要用tag來修飾ID。

3、使用子查詢

將父物件快取起來以備將來的使用

4、最佳化選擇器以適用Sizzle的「從右到左」模型

自版本1.3之後,jQuery採用了Sizzle函式庫,與先前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左到右”的模型代替了“從右至左”的模型。

5、採用find(),而不使用上下文來找出

find()函數的確快些。但是如果一個頁面有許多DOM節點時,需要來回查找時,可能需要更多時間:

6、利用強大的鍊式操作##採用jQuery的鍊式操作比快取選擇器更有效

7、寫屬於你的選擇器

如果你常在程式碼中使用選擇器,那麼擴充jQuery的$ .expr[':']物件吧,編寫你自己的選擇器。

二、最佳化DOM操作建議

#8、快取jQuery物件

將你經常用的元素緩存起來

9、當要進行DOM插入時,將所有元素封裝成一個元素

這裡的基本思想是在記憶體中建立你確實想要的東西,然後更新DOM。這並不是一個jQuery最佳實踐,但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢直接的DOM操作很慢。盡可能少的去更改HTML結構。

10、儘管jQuery不會拋出異常,但開發者也應該檢查物件

儘管jQuery不會拋出大量的異常給用戶,但是開發者也不要依賴於此。 jQuery通常會執行了一大堆沒用的函數之後才確定一個物件是否存在。所以在對一個作一系列引用之前,應先檢查一下這個物件存不存在。

11、使用直接函數,而不要使用與與之等同的函數

為了獲得更好的性能,你應該使用直接函數如. a j a x ( ) , 而不要使用.ajax(),而不要使用.ajax(),而不要使用.get(),. g e t J S O N ( ) , .getJSON(),.getJSON(),.post(),因為後面的幾個將會呼叫$.ajax()。

12、快取jQuery結果,以備後來使用

你常會取得一個javasript應用程式物件-你可以用App.來儲存你常選擇的對象,以備將來使用

13、採用jQuery的內部函數data()來儲存狀態

不要忘了採用.data()函數來儲存資訊

14、使用jQuery utility函數

不要忘了簡單實用的jQuery的utility函數。我最喜歡的是$.isFunction(), i s A r r a y ( ) 和 isArray()和isArray()和.each()。

15、為HTML區塊新增「JS」的class

#當jQuery載入之後,先給HTML新增一個叫」JS」的class$('HTML ').addClass('JS');只有當使用者啟用JavaScript的時候,才能加入CSS樣式。

三、關於最佳化事件效能的建議

#16、延遲到( w i n d o w ) . l o a d 

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

17、使用Event Delegation

#

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

18、使用ready事件的簡稱

如果你想壓縮js插件,節省每一個字節,你應該避免使用$(document).onready()

四、測試jQuery

#19、jQuery單元測試

測試JavaSript程式碼最好的方法就是人來測試。但你可以使用一些自動化的工具如 Selenium , Funcunit , QUit , QMock 來測試你的程式碼(尤其是插件)。我想在另外一個專題來討論這個話題因為實在有太多要說的了。

20、標準化你的jQuery程式碼

經常標準化你的程式碼,看看哪個查詢比較慢,然後取代它。你可以用Firebug控制台。你也可以使用jQuery的快捷函數來讓測試變得更容易些

五、其他常用jQuery效能最佳化建議

21、使用最新版本的jQuery

最新的版本往往是最好的。更換了版本後,不要忘記測試你的程式碼。有時候也不是完全向後相容的。

22、使用HMTL5

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

23、如果為15個以上的元素加上樣式時,直接為DOM元素加上style標籤

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

24、避免載入多餘的程式碼

將Javascript程式碼放在不同的檔案中是個好的方法,只在需要的時候載入它們。這樣你不會載入不必要的程式碼和選擇器。也便於管理程式碼。

25、壓縮成一個主JS文件,將下載次數保持到最少

當你已經確定了哪些文件是應該被載入的,那麼將它們打包成一個文件。用一些開源的工具可以自動幫你完成,例如使用 Minify (和你的後端程式碼整合)或使用JSCompressor , YUI Compressor 或 Dean Edwards JS packer 等線上工具可以為你壓縮檔案。我最喜歡的是 JSCompressor 。

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

######27、從Google載入jQuery框架#########當你的應用程式正式上線的時候,請從Google CDN載入jQuery,因為使用者可以從最近的地方獲取代碼。這樣你可以減少伺服器請求,而使用者如果瀏覽其他網站,而它也使用Google CDN的jQuery時,瀏覽器就會立即從快取中調出jQuery程式碼。 #########28、###緩慢載入內容不僅能提高載入速度,也能提高SEO優化,使用Ajax來載入你的網站吧,這樣可以節省伺服器端載入時間。你可以從一個常見的側邊欄widget開始。 ######【推薦學習:###jQuery影片###、###web前端開發###】###

以上是【整理總結】優化jQuery效能的多種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),