一、減少dom數(shù)量的方法

可以使用偽元素，陰影實現(xiàn)的內(nèi)容盡量不使用DOM實現(xiàn)，如清除浮動、樣式實現(xiàn)等；

按需加載，減少不必要的渲染；

結構合理，語義化標簽

二、大量DOM時的優(yōu)化

當對Dom元素進行一系列操作時，對Dom進行訪問和修改Dom引起的重繪和重排都比較消耗性能，所以關于操作Dom，應該從以下幾點出發(fā)：

1. 緩存Dom對象

首先不管在什么場景下。操作Dom一般首先會去訪問Dom，尤其是像循環(huán)遍歷這種事件復雜度可能會比較高的操作/那么可以在循環(huán)之前就將主節(jié)點，不必循環(huán)的Dom節(jié)點先獲取到，那么在循環(huán)里就可以世界引用，而不必去重新查詢。

let rootElem = document.querySelector（'#app'）; let childList = rootElem.child; //假設全是dom節(jié)點 for(let i =0; i<childList.lenght; i++){/***根據(jù)條件對應操作}

2.文檔片段

利用 document.cerateDocumentFragment() 方法創(chuàng)建文檔碎片節(jié)點，創(chuàng)建的是一個虛擬的節(jié)點對象。向這個節(jié)點添加dom節(jié)點，修改dom節(jié)點并不會影響到真實的dom結構。

我們可以利用這一點先將我們需要修改的dom一并修改完，保存至文檔碎片中，然后用文檔碎片一次性的替換真實的dom節(jié)點。與虛擬dom類似，同樣達到了不頻繁修改dom而導致的重排更重繪的過程。

let fragment = document.certaeDocumentFragment(); const operationDomHandle = (fragment) =>{//操作 } operationDomHandle(fragment); //然后最后再替換 rootElem.replaceChild(fragment,oldDom);

這樣舊址會觸發(fā)一次回流，效率會得到很大的提升。如果需要對元素進行復雜的操作（刪減，添加子節(jié)點），那么我們應當先將元素從頁面中移除，然后再對其進行操作，或者將其復制一個（cloneNode()），在內(nèi)存中進行操作后再替換原來的節(jié)點。

var clone = old.cloneNode(true); operationDomHandle(clone); rootElem.repalceChild（clone，oldDom）

3.用innerHtml 代替高頻的appendChilde

4.最優(yōu)的layout方案

批量讀，一次性寫。先對一個不在render tree上的節(jié)點進行操作，再把這個節(jié)點添加回 render tree。這樣只會觸發(fā)一次DOM操作。使用 requestAnimationFrame()，把任何導致重繪的操作放入 requestAnimationFrame

5.虛擬Dom
js模似DOM樹并對DOM樹操作的一種技術。virtual DOM是一個純js對象（字符串對象），所以對他操作會高效。

利用virtual dom，將dom抽象為虛擬dom，在dom發(fā)生變化的時候縣對虛擬dom進行操作，通過dom diff算法將虛擬dom和原虛擬dom的結構做對比，最終批量的去修該真實的dom結構，盡可能的避免了頻繁修改dom而導致的頻繁的重排和重繪。

總結

以上是生活随笔為你收集整理的说一下减少dom的办法？一次性给你大量的dom怎么优化？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。