一、減少dom數量的方法

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

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

結構合理，語義化標簽

二、大量DOM時的優化

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

1. 緩存Dom對象

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

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

2.文檔片段

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

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

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

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

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

3.用innerHtml 代替高頻的appendChilde

4.最優的layout方案

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。