HTML 减少dom的办法？一次性给你大量的dom怎么优化？

一、减少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而导致的频繁的重排和重绘。

原文链接：https://blog.csdn.net/m0_45070460/article/details/107604658

可能来源：小程序-前端面试星球