數(shù)據(jù)存儲(chǔ)

·在javascript中，數(shù)據(jù)存儲(chǔ)的位置會(huì)對(duì)代碼整體性能產(chǎn)生重大的影響。

·數(shù)據(jù)存儲(chǔ)共有4種方式：字面量、變量、數(shù)組、對(duì)象成員。

·要理解變量的訪問速度，就要理解作用域。由于局部變量處于作用域的起始位置，因此訪問速度比訪問跨域作用域變量(即除起始位置之外的外層作用域變量)更快。即變量處在作用域的位置越深，訪問速度越慢。這也就說(shuō)明，訪問全局變量的速度是最慢的。 總的來(lái)說(shuō)，字面量和局部變量的訪問速度快于數(shù)組和對(duì)象成員的訪問速度。 

因此，常見的一些提高數(shù)據(jù)訪問速度的方法有：

①避免使用with、try-catch中的catch語(yǔ)句，因?yàn)樗鼤?huì)改變執(zhí)行環(huán)境的作用域鏈。

②盡量少用嵌套對(duì)象、避免對(duì)象嵌套過深。

③可以把常需要訪問的對(duì)象成員、數(shù)組項(xiàng)、跨域變量保存在局部變量中。

DOM編程

我們知道用javascript操作DOM會(huì)影響性能，這是為什呢。這個(gè)問題是“天生”的。

因?yàn)镈OM是一個(gè)獨(dú)立于語(yǔ)言的，用于操作XML和HTML文檔的程序接口，而客戶端腳本編程大多數(shù)時(shí)候是和底層文檔打交道。所以推薦的做法就是盡可能少操作DOM。

有這么一些小技巧：

①如果需要多次訪問某個(gè)DOM節(jié)點(diǎn)，使用局部變量存儲(chǔ)它的引用。

②小心處理HTML集合，因?yàn)樗鼘?shí)時(shí)聯(lián)系著底層文檔。

例如：

var divs= document.getElementsByTagName('div');
for(var i = 0;i < divs.length; i++){
 document.body.appendChild(document.creatElement('div'))
}

這是一個(gè)死循環(huán)，原因就是divs.length每次迭代都會(huì)增加，它反映的是底層文檔的當(dāng)前狀態(tài)。

因此，我們?cè)谛枰闅v某個(gè)HTML集合的時(shí)候，可以先把長(zhǎng)度緩存起來(lái)再使用。而如果是要經(jīng)常操作的集合，可以把整個(gè)集合拷貝到一個(gè)數(shù)組中。

③使用一些速度更快的API

例如：

childNodes -> children
childElementCount -> childNodes.length
firstElementChild -> firstChild
lastElementChild -> last Child
getElementByTagName ->querySelectorAll

④注意重繪和重排

1.由于每次重排都會(huì)產(chǎn)生計(jì)算消耗，大多數(shù)瀏覽器通過隊(duì)列化修改并批量執(zhí)行來(lái)優(yōu)化重排過程。

而獲取布局信息的操作會(huì)導(dǎo)致隊(duì)列刷新，如下方法：

offsetTop,offsetLeft,offsetWidth,offsetHeight、
scrollTop,scrollLeft,scrollWidth,scrollHeight、
clientTop,clientLeft,clientWidth,clientHeight、
getComputedStyle

因?yàn)檫@些屬性或方法需要返回最新的布局信息，因此瀏覽器不得不執(zhí)行渲染列隊(duì)中的“待處理變化”并觸發(fā)重排以返回正確的值。

2.最小化重繪和重排，合并多次對(duì)DOM和樣式的修改，如

var el = document.getElementById('mydiv');
el.style.margin = '5px';
el.style.padding = '2px';
el.style.borderLeft= '5px';

以上，修改了三個(gè)樣式，每個(gè)都會(huì)影響元素的幾何結(jié)構(gòu)，最糟糕的情況下會(huì)導(dǎo)致三次重排(大部分現(xiàn)代瀏覽器為此做了優(yōu)化，只會(huì)觸發(fā)一次)

可以被優(yōu)化為：

var el = document.getElementById('mydiv');
el.style.cssText = 'margin = '5px';padding = '2px';borderLeft= '5px';

3.需要對(duì)DOM元素進(jìn)行一系列操作時(shí)，可以通過以下步驟：

1）使元素脫離文檔流

2）對(duì)其應(yīng)用多重改變

3）把元素帶回文檔中

具體方法有

     ·隱藏元素、應(yīng)用修改、重新顯示

     ·使用文檔片段，在別的地方構(gòu)建一個(gè)子樹，再把它拷貝回文檔

     ·將原始元素拷貝到一個(gè)脫離文檔的節(jié)點(diǎn)，修改后再替換原始元素

⑤動(dòng)畫中使用絕對(duì)定位，使用拖放代理。

⑥使用事件委托來(lái)減少事件處理器的數(shù)量。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論