js中數(shù)據(jù)存儲(chǔ)和DOM編程的示例分析-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、獲嘉ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的獲嘉網(wǎng)站制作公司

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

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

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

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

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

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

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

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

DOM編程

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

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

有這么一些小技巧：

①如果需要多次訪問(wèn)某個(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ù)瀏覽器通過(guò)隊(duì)列化修改并批量執(zhí)行來(lái)優(yōu)化重排過(guò)程。

而獲取布局信息的操作會(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í)，可以通過(guò)以下步驟：

1）使元素脫離文檔流

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

3）把元素帶回文檔中

具體方法有

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

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

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

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：js中數(shù)據(jù)存儲(chǔ)和DOM編程的示例分析-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article12/dicigc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、全網(wǎng)營(yíng)銷推廣、動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)