提升jQuery的性能需要做好七件事
做好七件事幫你提升jQuery的性能,想知道哪幾件事情嗎?
1. Append Outside of Loops
凡是觸及到DOM都是有代價(jià)的。如果你向DOM當(dāng)中附加大量的元素,你會(huì)想一次性將它們?nèi)扛郊舆M(jìn)來(lái),而不是分多次進(jìn)行。當(dāng)在循環(huán)當(dāng)中附加元素就會(huì)產(chǎn)生一個(gè)常見的問(wèn)題。
$.each( myArray, function( i, item ) { var newListItem = "<li>" + item + "</li>"; $( "#ballers" ).append( newListItem ); });
一個(gè)常用的技巧是利用文檔片段(document fragment)。在循環(huán)的每一次迭代當(dāng)中,將元素附加到片段而不是DOM元素當(dāng)中。當(dāng)循環(huán)結(jié)束后,將片段附加到DOM元素當(dāng)中即可。
var frag = document.createDocumentFragment(); $.each( myArray, function( i, item ) { var newListItem = document.createElement( "li" ); var itemText = document.createTextNode( item ); newListItem.appendChild( itemText ); frag.appendChild( newListItem ); }); $( "#ballers" )[ 0 ].appendChild( frag );
另一個(gè)簡(jiǎn)單的技巧是在循環(huán)的每次迭代當(dāng)中,持續(xù)構(gòu)建一個(gè)字符串。當(dāng)循環(huán)結(jié)束后,將DOM元素的HTML設(shè)置成該字符串。
var myHtml = ""; $.each( myArray, function( i, item ) { myHtml += "<li>" + item + "</li>"; }); $( "#ballers" ).html( myHtml );
當(dāng)然還有其它一些技巧可以供你嘗試。一個(gè)名為 jsperf 的站點(diǎn)為測(cè)試這些性能提供了一條好的出路。該網(wǎng)站允許你使用基準(zhǔn)測(cè)試每一個(gè)技巧,并將其跨平臺(tái)的性能測(cè)試結(jié)果可視化的展現(xiàn)出來(lái)。
2. Cache Length During Loops
在for循環(huán)當(dāng)中,不要每次都訪問(wèn)數(shù)組的 length 屬性;應(yīng)當(dāng)事先將其緩存起來(lái)。
var myLength = myArray.length; for ( var i = 0; i < myLength; i++ ) { // do stuff }
3. Detach Elements to Work with Them
操作DOM是緩慢的,因此你想盡可能減少對(duì)齊進(jìn)行操作。jQuery在1.4版本當(dāng)中引入了名為 detach() 的方法來(lái)幫助解決這一問(wèn)題,它允許你在對(duì)元素進(jìn)行操作時(shí),將它們從DOM當(dāng)中分離出來(lái)。
var $table = $( "#myTable" ); var $parent = $table.parent(); $table.detach(); // ... add lots and lots of rows to table $parent.append( $table );
4. Don't Act on Absent Elements
如果你正打算在一個(gè)空的選擇器上運(yùn)行大量的代碼,jQuery并不會(huì)給予任何的提示 -- 它將會(huì)繼續(xù)的執(zhí)行,就像是沒(méi)有發(fā)生任何的錯(cuò)誤。必須由你來(lái)驗(yàn)證選擇器包含了多少元素。
// Bad: This runs three functions before it // realizes there's nothing in the selection $( "#nosuchthing" ).slideUp(); // Better: var $mySelection = $( "#nosuchthing" ); if ( $mySelection.length ) { $mySelection.slideUp(); } // Best: Add a doOnce plugin. jQuery.fn.doOnce = function( func ) { this.length && func.apply( this ); return this; } $( "li.cartitems" ).doOnce(function() { // make it ajax! \o/ });
本指南特別適用于那些當(dāng)選擇器不包含元素時(shí)還需要大量的開銷的 jQuery UI 部件。
5. Optimize Selectors
選擇器的優(yōu)化和過(guò)去比起來(lái)并不是那么的重要,因?yàn)楹芏酁g覽器都實(shí)現(xiàn)了 document.querySelectorAll() 方法并且jQuery將選擇器的負(fù)擔(dān)轉(zhuǎn)移到了瀏覽器上面。但是仍然有一些技巧需要銘記在心。
基于ID的選擇器
以一個(gè)ID作為選擇器的開始總是最好的。
// Fast: $( "#container div.robotarm" ); // Super-fast: $( "#container" ).find( "div.robotarm" );
采用 .find() 方法的方式將更加的快速,因?yàn)榈谝粋€(gè)選擇器已經(jīng)過(guò)處理,而無(wú)需通過(guò)嘈雜的選擇器引擎 -- ID-Only的選擇器已使用 document.getElementById() 方法進(jìn)行處理,之所以快速,是因?yàn)樗菫g覽器的原生方法。
特異性
盡量詳細(xì)的描述選擇器的右側(cè),對(duì)于左側(cè)則應(yīng)反其道而行之。
// Unoptimized: $( "div.data .gonzalez" ); // Optimized: $( ".data td.gonzalez" );
盡量在選擇器的最右側(cè)使用 tag.class 的形式來(lái)描述選擇器,而在左側(cè)則盡量只使用 tag 或者 .class 。
避免過(guò)度使用特異性
$( ".data table.attendees td.gonzalez" ); // Better: Drop the middle if possible. $( ".data td.gonzalez" );
去討好“DOM”總是有利于提升選擇器的性能,因?yàn)檫x擇器引擎在搜尋元素時(shí)無(wú)需進(jìn)行太多的遍歷。
避免使用通用選擇器
如果一個(gè)選擇器明確或暗示它能在不確定的范圍內(nèi)進(jìn)行匹配將會(huì)大大影響性能。
$( ".buttons > *" ); // Extremely expensive. $( ".buttons" ).children(); // Much better. $( ".category :radio" ); // Implied universal selection. $( ".category *:radio" ); // Same thing, explicit now. $( ".category input:radio" ); // Much better. 復(fù)制代碼 6. Use Stylesheets for Changing CSS on Many Elements
假如你使用 .css() 方法來(lái)改變超過(guò)20個(gè)元素的CSS,應(yīng)當(dāng)考慮為頁(yè)面添加一個(gè)樣式標(biāo)簽作為替代,這樣做可以提升將近60%的速度。
// Fine for up to 20 elements, slow after that: $( "a.swedberg" ).css( "color", "#0769ad" ); // Much faster: $( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>") .appendTo( "head" );
7. Don't Treat jQuery as a Black Box
以上就是提升jQuery的性能需要做好的七件事,清楚了吧!
- JQuery Tips(4) 一些關(guān)于提高JQuery性能的Tips
- Jquery優(yōu)化效率 提升性能解決方案
- jquery提升性能最佳實(shí)踐小結(jié)
- 基于jquery的高性能td和input切換并可修改內(nèi)容實(shí)現(xiàn)代碼
- 打造基于jQuery的高性能TreeView(asp.net)
- JQuery each()函數(shù)如何優(yōu)化循環(huán)DOM結(jié)構(gòu)的性能
- jquery選擇器的選擇使用及性能介紹
- js的壓縮及jquery壓縮探討(提高頁(yè)面加載性能/保護(hù)勞動(dòng)成果)
- JQuery for與each性能比較分析
相關(guān)文章
jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
今天項(xiàng)目中加了一個(gè)上傳文件的需求,我就搞了一下,下面這篇文章主要給大家介紹了關(guān)于jquery?ajax實(shí)現(xiàn)文件上傳提交的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
這是一個(gè)基于jquery的圖片效果,它的作用是:當(dāng)圖片點(diǎn)擊變大(變小)時(shí),其它圖片按照一定的規(guī)則進(jìn)行排序運(yùn)動(dòng)2012-11-11JQuery對(duì)表格進(jìn)行操作的常用技巧總結(jié)
這篇文章主要介紹了JQuery對(duì)表格進(jìn)行操作的常用技巧,需要的朋友可以參考下2014-04-04jQuery漸變發(fā)光導(dǎo)航菜單的實(shí)例代碼
今天介紹一個(gè)jQuery漸變發(fā)光效果的導(dǎo)航菜單,這是一個(gè)簡(jiǎn)單的通過(guò)jQuery控制opacity實(shí)現(xiàn)的導(dǎo)航菜單。2013-03-03jQuery+json實(shí)現(xiàn)的簡(jiǎn)易Ajax調(diào)用實(shí)例
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)的簡(jiǎn)易Ajax調(diào)用,結(jié)合實(shí)例形式分析了jQuery基于ajax實(shí)現(xiàn)json傳參調(diào)用的技巧,需要的朋友可以參考下2015-12-12