如何提高Dom訪問速度
在瀏覽器中對(duì)于Dom的操作和普通的腳本的操作處于兩個(gè)不同的dll中，兩個(gè)dll的交互是比較耗時(shí)的，優(yōu)化對(duì)Dom的操作可以提高腳本的執(zhí)行速度。下面是對(duì)如何優(yōu)化的一些總結(jié)：
將需要多次操作的節(jié)點(diǎn)存儲(chǔ)在一個(gè)變量中，避免多次獲取。
對(duì)于大多數(shù)瀏覽器來說innerHTML操作比Dom操作速度要快，最新的瀏覽器則相反，但對(duì)于大多數(shù)日常操作來說具體差異并不大，另外，如果需要新創(chuàng)建的html片段中的腳本能夠執(zhí)行則需要使用Dom操作。
不建議用數(shù)組的 length 屬性做循環(huán)判斷條件。訪問集合的 length 比數(shù)組的length 還要慢。當(dāng)每次迭代過程訪問集合的 length 屬性時(shí)，它導(dǎo)致集合器更新?？梢院?jiǎn)單的將length保存在一個(gè)變量中，也可以將集合先存儲(chǔ)在數(shù)組中。
遍歷 children 比 childNodes 更快，因?yàn)榧享?xiàng)更少。
重繪和重排版是負(fù)擔(dān)很重的操作，可能導(dǎo)致網(wǎng)頁(yè)應(yīng)用的用戶界面失去相應(yīng)。所以，十分有必要盡可能減少這類事情的發(fā)生。減少方法有三種，一：將需要影響的集合先隱藏，在處理完成后再展示；二：創(chuàng)建需操作節(jié)點(diǎn)的備份，對(duì)備份處理完成后替換原節(jié)點(diǎn)；三：創(chuàng)建節(jié)點(diǎn)群，對(duì)節(jié)點(diǎn)群操作完成后替換到原節(jié)點(diǎn)，最高效，操作方式如：
var fragment = document.createDocumentFragment();//創(chuàng)建節(jié)點(diǎn)群，文檔片段
appendDataToElement(fragment, data);//增加節(jié)點(diǎn)到節(jié)點(diǎn)群
document.getElementById('mylist').appendChild(fragment);//僅引發(fā)一次重新排版
另外對(duì)行內(nèi)樣式的操作可以通過document.getElementById("doc").style.cssText修改元素style屬性
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)圓與矩形功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解
由于業(yè)務(wù)需要，要求實(shí)現(xiàn)樹形菜單，且菜單數(shù)據(jù)由后臺(tái)返回，下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2021-05-05
JSON 是 JavaScript 原生格式，這意味著 在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包,接下來由腳本之家小編給大家介紹在JavaScript中使用JSON數(shù)據(jù)的方法，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
bootstrap開發(fā)標(biāo)簽頁(yè)時(shí)，標(biāo)簽頁(yè)顯示正常，但點(diǎn)擊時(shí)候?qū)?yīng)內(nèi)容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁(yè)簽切換失效的解決方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要介紹了上傳圖片js判斷圖片尺寸和格式并兼容IE,需要的朋友可以參考下2014-09-09
JavaScript動(dòng)態(tài)改變表格單元格內(nèi)容的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)改變表格單元格內(nèi)容的方法,涉及javascript操作html中table表格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-05-05
一文搞懂JavaScript如何實(shí)現(xiàn)圖片懶加載
圖片懶加載，往往作為減少首頁(yè)白屏?xí)r間的一個(gè)解決方案而出現(xiàn)。本文將通過示例帶大家一起探究一下JavaScript是如何實(shí)現(xiàn)圖片懶加載的，感興趣的可以了解一下2022-06-06
Electron 使用 Nodemon 配置自動(dòng)重啟的方法
在Electron開發(fā)過程中,每次代碼修改后需手動(dòng)重新啟動(dòng)應(yīng)用,這一過程可以通過引入Nodemon工具自動(dòng)化,Nodemon能夠監(jiān)測(cè)文件變化并自動(dòng)重啟服務(wù)器,本文給大家介紹Electron 使用 Nodemon 配置自動(dòng)重啟,感興趣的朋友一起看看吧2024-09-09
相信很多與頁(yè)面打過交道的同學(xué)都對(duì) Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生2011-10-10