高性能JavaScript DOM編程(1)
我們知道,DOM是用于操作XML和HTML文檔的應(yīng)用程序接口,用腳本進(jìn)行DOM操作的代價(jià)很昂貴。有個(gè)貼切的比喻,把DOM和JavaScript(這里指ECMScript)各自想象為一個(gè)島嶼,它們之間用收費(fèi)橋梁連接,ECMAScript每次訪問(wèn)DOM,都要途徑這座橋,并交納“過(guò)橋費(fèi)”,訪問(wèn)DOM的次數(shù)越多,費(fèi)用也就越高。因此,推薦的做法是盡量減少過(guò)橋的次數(shù),努力待在ECMAScript島上。我們不可能不用DOM的接口,那么,怎樣才能提高程序的效率?
1、DOM訪問(wèn)與修改
訪問(wèn)DOM元素是有代價(jià)的(“過(guò)橋費(fèi)”你懂的),修改元素代價(jià)更是昂貴,因?yàn)樗鼤?huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化(重排和重繪)。
當(dāng)然最壞的情況是在循環(huán)中訪問(wèn)或者修改元素,看下面兩段代碼:
var times = 15000; // code1 console.time(1); for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a'; } console.timeEnd(1); // code2 console.time(2); var str = ''; for(var i = 0; i < times; i++) { str += 'a'; } document.getElementById('myDiv2').innerHTML = str; console.timeEnd(2);
結(jié)果第一次運(yùn)行的時(shí)間居然是第二次的千倍!(chrome 版本 44.0.2403.130 m)
1: 2846.700ms 2: 1.046ms
第一段代碼的問(wèn)題在于,每次循環(huán)迭代,該元素都會(huì)被訪問(wèn)兩次:一次讀取innerHTML的值,另一次重寫它,也就是說(shuō),每次循環(huán)都在過(guò)橋(重排和重繪將在下一篇講解)!結(jié)果充分表明,訪問(wèn)DOM的次數(shù)越多,代碼的運(yùn)行速度越慢。因此,能減少DOM訪問(wèn)的次數(shù)則盡量減少,盡量留在ECMAScript這端處理。
2、HTML集合 & 遍歷DOM
操作DOM另一個(gè)耗能點(diǎn)就是遍歷DOM,一般我們會(huì)收集一個(gè)HTML集合,比如用getElementsByTagName(),或者用document.links等,我想大家對(duì)此都不陌生。收集的結(jié)果是一個(gè)類似數(shù)組的集合,它處于一種“實(shí)時(shí)狀態(tài)”實(shí)時(shí)存在,這意味著當(dāng)?shù)讓游臋n對(duì)象更新時(shí),它也會(huì)自動(dòng)更新。怎么講?很簡(jiǎn)單舉個(gè)栗子:
<body> <ul id='fruit'> <li> apple </li> <li> orange </li> <li> banana </li> </ul> </body> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); var peach = document.createElement('li'); peach.innerHTML = 'peach'; document.getElementById('fruit').appendChild(peach); console.log(lis.length); // 4 </script>
而這正是低效之源!很簡(jiǎn)單,跟數(shù)組的優(yōu)化操作一樣,緩存?zhèn)€length變量就ok了(讀取一個(gè)集合的length比讀取一個(gè)普通數(shù)組的lengh要慢很多,因?yàn)槊看味家樵儯?/p>
console.time(0); var lis0 = document.getElementsByTagName('li'); var str0 = ''; for(var i = 0; i < lis0.length; i++) { str0 += lis0[i].innerHTML; } console.timeEnd(0); console.time(1); var lis1 = document.getElementsByTagName('li'); var str1 = ''; for(var i = 0, len = lis1.length; i < len; i++) { str1 += lis1[i].innerHTML; } console.timeEnd(1);
我們看看性能提升能有多少?
0: 0.974ms 1: 0.664ms
當(dāng)集合的長(zhǎng)度大的時(shí)候(demo是1000),性能提升還是很明顯的。
而《高性能JavaScript》提出了另一個(gè)優(yōu)化策略,它指出,“由于遍歷數(shù)組比遍歷集合快,因此如果先將集合元素拷貝到數(shù)組中,那么訪問(wèn)它的屬性會(huì)更快”,經(jīng)過(guò)測(cè)試,并沒(méi)有很好地發(fā)現(xiàn)這個(gè)規(guī)律,所以還是不要多此一舉了,測(cè)試代碼如下:(有疑義歡迎與我交流探討)
console.time(1); var lis1 = document.getElementsByTagName('li'); var str1 = ''; for(var i = 0, len = lis1.length; i < len; i++) { str1 += lis1[i].innerHTML; } console.timeEnd(1); console.time(2); var lis2 = document.getElementsByTagName('li'); var a = []; for(var i = 0, len = lis2.length; i < len; i++) a[i] = lis2[i]; var str2 = ''; for(var i = 0, len = a.length; i < len; i++) { str2 += a[i].innerHTML; } console.timeEnd(2);
本節(jié)的最后介紹兩個(gè)原生DOM方法,querySelector()和querySelectorAll(),相信大家都不陌生,前者返回一個(gè)數(shù)組(注意,它們的返回值不像HTML集合一樣會(huì)動(dòng)態(tài)變化),后者返回匹配的第一個(gè)元素。好吧,其實(shí)并不是所有時(shí)候它的性能都優(yōu)于前者的HTML集合遍歷。
console.time(1); var lis1 = document.getElementsByTagName('li'); console.timeEnd(1); console.time(2); var lis2 = document.querySelectorAll('li'); console.timeEnd(2); // 1: 0.038ms // 2: 3.957ms
但是因?yàn)樗穷愃艭SS的選擇方法,所以在做組合選擇的時(shí)候,效率會(huì)提升,又方便。比如做如下的組合查詢:
var elements = document.querySelectorAll('#menu a'); var elements = document.querySelectorAll('div.warning, div.notice');
以上就是關(guān)于高性能JavaScript DOM編程的全部?jī)?nèi)容,希望大家可以理解,對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動(dòng)縮放圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動(dòng)縮放圖片的方法,實(shí)例分析了javascript操作頁(yè)面元素及屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十一)之js中的Object類詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)
箭頭函數(shù)是在es6中添加的一種規(guī)范,箭頭函數(shù)相當(dāng)于匿名函數(shù),簡(jiǎn)化了函數(shù)的定義,下面這篇文章主要給大家介紹了關(guān)于JavaScript高級(jí)教程之如何玩轉(zhuǎn)箭頭函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JavaScript實(shí)現(xiàn)判斷時(shí)間間隔是否連續(xù)為一天
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)判斷時(shí)間間隔是否連續(xù)為一天,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-01-01詳解微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互
這篇文章主要介紹了微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07javascript 關(guān)于# 和 void的區(qū)別分析
href 為#的跳到了自己的頁(yè)面。原來(lái)‘#’代表的是 #top ,2009-10-10通過(guò)微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例
這篇文章主要介紹了通過(guò)微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JavaScript實(shí)現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)異步任務(wù)循環(huán)順序執(zhí)行的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-03-03