成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jquery最佳實(shí)踐筆記

leanxi / 932人閱讀

摘要：對(duì)比內(nèi)部使用引擎，處理各種選擇器。引擎的選擇順序是從右到左，所以這條語句是先選，然后再一個(gè)個(gè)過濾出父元素，這導(dǎo)致它比最快的形式大約慢。這條語句與上一條是同樣的情況。

使用最新版本

因?yàn)樾掳姹緯?huì)改進(jìn)性能，還有很多新功能

用對(duì)選擇器

最快的選擇器：id選擇器和元素標(biāo)簽選擇器
原因：遇到這些選擇器的時(shí)候，jQuery內(nèi)部會(huì)自動(dòng)調(diào)用瀏覽器的原生方法（比如getElementById()），所以它們的執(zhí)行速度快

較慢的選擇器：class選擇器
$(".className")的性能，取決于不同的瀏覽器。

Firefox、Safari、Chrome、Opera瀏覽器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都沒有部署這個(gè)方法，所以這個(gè)選擇器在IE中會(huì)相當(dāng)慢。

最慢的選擇器：偽類選擇器和屬性選擇器
原因：瀏覽器沒有針對(duì)的原生方法

優(yōu)化點(diǎn)
給選擇器指定上下文

$(".class");//慢的，需要遍歷整個(gè)dom去查找.class
$(".class", "#class-container");//快的，因?yàn)樗鼉H在class-container元素下查找

最快的查找子元素方法

$parent.find(".child")
這條是最快的語句。.find()方法會(huì)調(diào)用瀏覽器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度較快。

對(duì)比：
$("#parent > .child")

jQuery內(nèi)部使用Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，所以這條語句是先選.child，然后再一個(gè)個(gè)過濾出父元素#parent，這導(dǎo)致它比最快的形式大約慢70%。

$("#parent .child")

這條語句與上一條是同樣的情況。但是，上一條只選擇直接的子元素，這一條可以于選擇多級(jí)子元素，所以它的速度更慢，大概比最快的形式慢了77%。

有原生方法可以使用的場(chǎng)合，盡量避免使用jQuery 做好緩存 使用鏈?zhǔn)綄懛?/b> 事件的委托處理（Event Delegation） 少改動(dòng)DOM結(jié)構(gòu)

如果要插入多個(gè)元素，就先把它們合并，然后再一次性插入
// 更好的,array.join("")

如果你要對(duì)一個(gè)DOM元素進(jìn)行大量處理，應(yīng)該先用.detach()方法，把這個(gè)元素從DOM中取出來，處理完畢以后，再重新插回文檔

如果你要在DOM元素上儲(chǔ)存數(shù)據(jù)，不要寫成下面這樣：

var elem = $("#elem");
elem.data(key,value);

而要寫成

var elem = $("#elem");
$.data(elem[0],key,value);

根據(jù)測(cè)試，后一種寫法要比前一種寫法，快了將近10倍。因?yàn)?b>elem.data()方法是定義在jQuery函數(shù)的prototype對(duì)象上面的，而$.data()方法是定義jQuery函數(shù)上面的，調(diào)用的時(shí)候不從復(fù)雜的jQuery對(duì)象上調(diào)用，所以速度快得多。（此處可以參閱下面第10點(diǎn)。）

插入html代碼的時(shí)候，使用瀏覽器原生的innerHTML

正確處理循環(huán)

javascript原生循環(huán)方法for和while，要比jQuery的.each()方法快，應(yīng)該優(yōu)先使用原生方法。

AJAX

避免使用.getJson() 或 .get()，而是直接使用$.ajax()方法

不要使用http或https請(qǐng)求，寧愿選擇無模式的URLs，從url中去掉http或https

不要在url中加參數(shù)，用data對(duì)象傳遞它們。

參考資料

阮一峰老師的博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86433.html

相關(guān)文章

  • jQuery入門筆記之（七）插件

    摘要：目前插件已超過幾千種，由來自世界各地的開發(fā)者共同編寫驗(yàn)證和完善。而對(duì)于開發(fā)者而言，直接使用這些插件將快速穩(wěn)定架構(gòu)系統(tǒng)，節(jié)約項(xiàng)目成本。也就是說，插件也是代碼，通過文件引入的方式植入即可?，F(xiàn)在我們就完成了一個(gè)下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴(kuò)展(Extension)，是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種，由來自世界...

    defcon 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 筆記： node最佳實(shí)踐1 - 項(xiàng)目工程最佳實(shí)踐

    摘要：原文閱讀工程結(jié)構(gòu)最佳實(shí)踐組件化按照功能劃分按照組件劃分層次化不要在中寫太多業(yè)務(wù)邏輯，專注層業(yè)務(wù)層要單獨(dú)抽出數(shù)據(jù)庫(kù)層單獨(dú)抽出化把常用組件做成包分離的和配置化環(huán)境感知根據(jù)不同環(huán)境使用不同配置 showImg(https://segmentfault.com/img/bVYQsC?w=2558&h=817); 原文閱讀: nodebestpractices 1 工程結(jié)構(gòu)最佳實(shí)踐 1.1 組件...

    APICloud 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<