js中數據存儲和DOM編程的示例分析

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

數據存儲

·在javascript中，數據存儲的位置會對代碼整體性能產生重大的影響。

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

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

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

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

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

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

DOM編程

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

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

有這么一些小技巧：

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

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

例如：

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

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

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

③使用一些速度更快的API

例如：

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

④注意重繪和重排

1.由于每次重排都會產生計算消耗，大多數瀏覽器通過隊列化修改并批量執行來優化重排過程。

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

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

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

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

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

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

可以被優化為：

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

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

1）使元素脫離文檔流

2）對其應用多重改變

3）把元素帶回文檔中

具體方法有

     ·隱藏元素、應用修改、重新顯示

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

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

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

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

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