這篇文章給大家分享的是有關(guān)js中數(shù)據(jù)存儲和DOM編程的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的礦區(qū)網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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

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

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

①避免使用with、try-catch中的catch語句，因為它會改變執(zhí)行環(huán)境的作用域鏈。

②盡量少用嵌套對象、避免對象嵌套過深。

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

DOM編程

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

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

有這么一些小技巧：

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

②小心處理HTML集合，因為它實時聯(lián)系著底層文檔。

例如：

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

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

因此，我們在需要遍歷某個HTML集合的時候，可以先把長度緩存起來再使用。而如果是要經(jīng)常操作的集合，可以把整個集合拷貝到一個數(shù)組中。

③使用一些速度更快的API

例如：

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

④注意重繪和重排

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

而獲取布局信息的操作會導致隊列刷新，如下方法：

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

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

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

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

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

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

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

3.需要對DOM元素進行一系列操作時，可以通過以下步驟：

1）使元素脫離文檔流

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

3）把元素帶回文檔中

具體方法有

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

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

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

⑤動畫中使用絕對定位，使用拖放代理。

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

感謝各位的閱讀！關(guān)于“js中數(shù)據(jù)存儲和DOM編程的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！