DOM编程：
javascript每次访问DOM都要产生消耗，所以要尽可能减少DOM操作。
比如：
1.对DOM访问后内容存进一个变量、对DOM的修改内容放进一个变量，避免每次都去访问DOM。
for(1,<100,i++){
document.getElementById("content").innerHTML +='a';
}
每次添加一个a都要访问DOM，要访问100次，运行速度慢。直接把这些a放进一个变量中，最后访问一次DOM：
for(i,<100,i++){
text +="a" }
document.getElementById("content").innerHTML = text;
读取出来的DOM内容也存进一个变量里，免得每次都去读取。比如长度，比如布局信息：
coll = document.getElementByTagName("a").length;
2.减少重排重绘：
“浏览器下载完HTML、CSS、JS后会生成两棵树，DOM树和渲染树，当DOM属性发生某些改变时，会导致重排重绘：
重排：浏览器重新构造渲染树。 重绘：浏览器将重排后的渲染树渲染到屏幕上。
导致重排的情况：1.添加或删除 可见的 DOM元素 2.元素位置改变 3.元素尺寸改变
4.内容改变 5.浏览器窗口尺寸改变。”
1.用cssText合并所有改变：
bodystyle=document.body.style;
bodystyle.color = red ; bodystyle.height = 1000px ; bodystyle.width = 100%
要修改这三个属性需要进行三次重排重绘，用cssText只用重排重绘一次：
bodystyle.cssText = 'color:red; height:1000px; 100% ' ;
2.让元素脱离文档流：
让元素脱离文档流 ，对其进行批量修改， 再把元素带回文档。三种方法脱离文档流：隐藏元素、文档片段、修改副本再替换。
1.隐藏元素：因为导致重排的情况：添加或删除 可见的 DOM元素。因此只用把需要修改的区域display，隐藏修改起来就不算重排。
2.文档片段：在文档之外创建并更新一个文档片段，然后把它附加到原始列表中。当附加一个片段到节点时，实际上是添加该片段的子节点而不是片段本身。
“当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 可以减少页面渲染dom的次数，效率会明显提升。”
————————————————
版权声明：本文为CSDN博主「逍竹」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qiao13633426513/article/details/80243058
3.修改副本；用到了replacechild属性。为需要修改的节点创建一个备份，然后对副本进行修改，一旦操作完成就用新的节点替换旧的节点。