摘要:對比內部使用引擎,處理各種選擇器。引擎的選擇順序是從右到左,所以這條語句是先選,然后再一個個過濾出父元素,這導致它比最快的形式大約慢。這條語句與上一條是同樣的情況。
使用最新版本
因為新版本會改進性能,還有很多新功能
用對選擇器最快的選擇器:id選擇器和元素標簽選擇器
原因:遇到這些選擇器的時候,jQuery內部會自動調用瀏覽器的原生方法(比如getElementById()),所以它們的執(zhí)行速度快
較慢的選擇器:class選擇器
$(".className")的性能,取決于不同的瀏覽器。
Firefox、Safari、Chrome、Opera瀏覽器,都有原生方法getElementByClassName(),所以速度并不慢。但是,IE5-IE8都沒有部署這個方法,所以這個選擇器在IE中會相當慢。
最慢的選擇器:偽類選擇器和屬性選擇器
原因:瀏覽器沒有針對的原生方法
優(yōu)化點
給選擇器指定上下文
$(".class");//慢的,需要遍歷整個dom去查找.class $(".class", "#class-container");//快的,因為它僅在class-container元素下查找最快的查找子元素方法
$parent.find(".child")
這條是最快的語句。.find()方法會調用瀏覽器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度較快。
對比:
$("#parent > .child")
jQuery內部使用Sizzle引擎,處理各種選擇器。Sizzle引擎的選擇順序是從右到左,所以這條語句是先選.child,然后再一個個過濾出父元素#parent,這導致它比最快的形式大約慢70%。
$("#parent .child")
這條語句與上一條是同樣的情況。但是,上一條只選擇直接的子元素,這一條可以于選擇多級子元素,所以它的速度更慢,大概比最快的形式慢了77%。有原生方法可以使用的場合,盡量避免使用jQuery 做好緩存 使用鏈式寫法 事件的委托處理(Event Delegation) 少改動DOM結構
如果要插入多個元素,就先把它們合并,然后再一次性插入
// 更好的,array.join("")
如果你要對一個DOM元素進行大量處理,應該先用.detach()方法,把這個元素從DOM中取出來,處理完畢以后,再重新插回文檔
如果你要在DOM元素上儲存數據,不要寫成下面這樣:
var elem = $("#elem"); elem.data(key,value);
而要寫成
var elem = $("#elem"); $.data(elem[0],key,value);
根據測試,后一種寫法要比前一種寫法,快了將近10倍。因為elem.data()方法是定義在jQuery函數的prototype對象上面的,而$.data()方法是定義jQuery函數上面的,調用的時候不從復雜的jQuery對象上調用,所以速度快得多。(此處可以參閱下面第10點。)
插入html代碼的時候,使用瀏覽器原生的innerHTML
正確處理循環(huán)javascript原生循環(huán)方法for和while,要比jQuery的.each()方法快,應該優(yōu)先使用原生方法。
AJAX避免使用.getJson() 或 .get(),而是直接使用$.ajax()方法
不要使用http或https請求,寧愿選擇無模式的URLs,從url中去掉http或https
不要在url中加參數,用data對象傳遞它們。
參考資料阮一峰老師的博客
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86433.html
摘要:目前插件已超過幾千種,由來自世界各地的開發(fā)者共同編寫驗證和完善。而對于開發(fā)者而言,直接使用這些插件將快速穩(wěn)定架構系統(tǒng),節(jié)約項目成本。也就是說,插件也是代碼,通過文件引入的方式植入即可?,F在我們就完成了一個下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴展(Extension),是一種遵循一定規(guī)范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種,由來自世界...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業(yè)務工作時也會不定期更...
摘要:原文閱讀工程結構最佳實踐組件化按照功能劃分按照組件劃分層次化不要在中寫太多業(yè)務邏輯,專注層業(yè)務層要單獨抽出數據庫層單獨抽出化把常用組件做成包分離的和配置化環(huán)境感知根據不同環(huán)境使用不同配置 showImg(https://segmentfault.com/img/bVYQsC?w=2558&h=817); 原文閱讀: nodebestpractices 1 工程結構最佳實踐 1.1 組件...
摘要:前言月份開始出沒社區(qū),現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
閱讀 3968·2021-11-16 11:44
閱讀 5189·2021-10-09 09:54
閱讀 2031·2019-08-30 15:44
閱讀 1678·2019-08-29 17:22
閱讀 2753·2019-08-29 14:11
閱讀 3389·2019-08-26 13:25
閱讀 2324·2019-08-26 11:55
閱讀 1595·2019-08-26 10:37