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

資訊專欄INFORMATION COLUMN

JavaScript 元素選擇，對象與數(shù)組，各種循環(huán)，……性能測試

li21 / 2210人閱讀

摘要：代碼及結(jié)果五次測試得出花括號聲明對象效率底下，別用它使用中括號聲明數(shù)組性能極好，千萬別用測試地址調(diào)用方式性能調(diào)用對象快還是數(shù)組快全局變量代碼及結(jié)果六次測試得出調(diào)用數(shù)組與對象并沒有大的性能差距。有可能最快的是另一種，也有可能差異不同。

這篇文章能用事實助你開發(fā)高性能網(wǎng)頁。
本文中所有的建議、結(jié)論均基于——

測試平臺：Chrome 55 on Windows 7

測試工具：jsPerf

作者有點標題黨，因為作者想不起來還有什么是需要性能測試的 想起來再更新
所以，就只有標題那三類。

元素選擇

此部分包含 【相鄰元素選取】、【選擇器選取】兩個性能測試

相鄰元素選取

選擇那些非常親密的元素

預(yù)備 DOM
全局變量 
b=document.getElementById("b")
代碼及結(jié)果

十二次測試得出：

我們應(yīng)該使用 nextSibling, previousSibling 來選取之間沒有空格、換行符的親密元素

測試地址：Find Siblings

選擇器選取

比較 Id, ClassName, TagName, querySelector 以及 querySelectorAll 五個選擇器

預(yù)備 DOM
代碼及結(jié)果

五次測試得出：

Id 選擇器效率最高，實在不行再考慮 ClassName, TagName 或者 querySelector

測試地址：Native Seletors

對象與數(shù)組

此部分包含【對象和數(shù)組共五種聲明方式】、【對象數(shù)組調(diào)用方式比較】的兩個性能測試

各聲明方式之間

有 2 條 way 可以創(chuàng)造一個對象，3 條來創(chuàng)造一個數(shù)組。

代碼及結(jié)果

五次測試得出：

花括號 {} 聲明對象效率底下，別用它

使用中括號 [] 聲明數(shù)組性能極好，千萬別用 new Array(1,2,3)

測試地址：Array and Object Declarations

調(diào)用方式性能

調(diào)用對象快還是數(shù)組快？

全局變量 
b=document.getElementById("b")
代碼及結(jié)果

六次測試得出：

調(diào)用數(shù)組與對象并沒有大的性能差距。如果一定要分個勝負，那么數(shù)組贏了。

測試地址：Array and Object Calls

綜合兩個測試——保存數(shù)據(jù)時，用不那么語義化的數(shù)組比對象好多了

各種循環(huán)

此部分包含【循環(huán)語句】、【調(diào)用函數(shù)循環(huán)】的兩個性能測試

循環(huán)語句的性能較量

強迫癥的作者很久前就想知道 - 到底哪種循環(huán)語句最牛B？

代碼

結(jié)果

測試的前幾次，?。。∽钆ｊ氖沁@個：

for (var i=0;i

然后，是這個：


for (var i=0,len=a.length;i

=_=||| 作者傻了。提了個問題
有了結(jié)果：


不同的瀏覽器、版本、作業(yè)系統(tǒng)都有可能有不同的結(jié)果。有可能最快的是另一種，也有可能差異不同。
—— eyesofkids


這就是本測試的結(jié)果


測試地址：Loops

語句對函數(shù)

這個測試結(jié)果很多人都知道。就不再搞了。


使用 For/While 比使用 調(diào)用函數(shù) 快得多


別人的測試地址：forEach vs loop

等更……

謝謝閱讀！

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

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

相關(guān)文章

  • 吹毛求疵的追求優(yōu)雅高性能JavaScript

    摘要：這樣優(yōu)化后我們最多進行次判斷即可，大大提高了代碼的性能。表達式的值具有離散性， 個人博客,點擊查看目錄,喜歡可以關(guān)注一下. 1.從[]==![]為true來剖析JavaScript各種蛋疼的類型轉(zhuǎn)換 2.吹毛求疵的追求優(yōu)雅高性能JavaScript 李小龍說過:天下武功,無堅不摧,唯快不破.(真的說過嗎?)我想說的是:世間網(wǎng)站,完美體驗,唯快不破.(這個我承認我說過.) showImg...

    saucxs 評論0 收藏0

  • javascript性能優(yōu)化方面的知識總結(jié)

    摘要：插入迭代器如前面兩條語句可以寫成使用直接量替換為替換為替換為如果要創(chuàng)建具有一些特性的一般對象，也可以使用字面量，如下前面的代碼可用對象字面量來改寫成這樣使用優(yōu)化多次一旦需要更新請考慮使用文檔碎片來構(gòu)建結(jié)構(gòu)，然后再將其添加到現(xiàn)存的文檔中。 好贊，收藏自 總結(jié)的js性能優(yōu)化方面的小知識（不喜勿噴） 前言 一直在學習javascript，也有看過《犀利開發(fā)Jquery內(nèi)核詳解與實踐》，對...

    BlackHole1 評論0 收藏0

  • JS 數(shù)組循環(huán)遍歷方法的對比

    摘要：循環(huán)方法方法不改變原數(shù)組方法會給原數(shù)組中的每個元素都按順序調(diào)用一次函數(shù)。篩選出過濾出數(shù)組中符合條件的項組成新數(shù)組代碼方法方法為數(shù)組中的每個元素執(zhí)行一次函數(shù)，直到它找到一個使返回表示可轉(zhuǎn)換為布爾值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 發(fā)展至今已經(jīng)發(fā)展出多種數(shù)組的循環(huán)遍...

    BlackFlagBin 評論0 收藏0

  • 前端性能優(yōu)化指南

    摘要：前端性能優(yōu)化指南優(yōu)化緩存異步并不等于即時。操作性能問題主要有以下原因。發(fā)生在之前，所以相對來說會造成更多性能損耗。新引擎還對對象屬性訪問做了優(yōu)化，解決方案叫，簡稱。代價是前置的掃描類型編譯優(yōu)化。數(shù)組，，閉包變量不在優(yōu)化范疇之列。 前端性能優(yōu)化指南 AJAX優(yōu)化 緩存AJAX： 異步并不等于即時。 請求使用GET： 當使用XMLHttpRequest時，而URL長度不到2K...

    Pink 評論0 收藏0

  • 【前端性能優(yōu)化】高性能JavaScript整理總結(jié)

    摘要：然后執(zhí)行環(huán)境會創(chuàng)建一個活動對象，活動對象作為函數(shù)運行的變量對象，包含所有局部變量命名參數(shù)參數(shù)集合和，當執(zhí)行環(huán)境銷毀，活動對象也被銷毀。 高性能JavaScript整理總結(jié) 關(guān)于前端性能優(yōu)化：首先想到的是雅虎軍規(guī)34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規(guī)有很多相似之處有不當之...

    bovenson 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<