這篇文章給大家分享的是有關(guān)js中數(shù)據(jù)存儲和DOM編程的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
數(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每次迭代都會增加，它反映的是底層文檔的當(dāng)前狀態(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)化重排過程。
而獲取布局信息的操作會導(dǎo)致隊列刷新，如下方法：
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)，最糟糕的情況下會導(dǎo)致三次重排(大部分現(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)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
