动态添加dom时如何减少 dom渲染次数
2019-04-29 本文已影响0人
小海豚嗷嗷
笔试的时候做到一道题：向<ul id="root"></ul>插入1000条<li>我是li标签</li>标签，一般我们会想到使用循环，但是，由于渲染回流，在for循环内部多次appendChild会造成多次渲染，从而出现卡、闪屏的现象
我们经常使用javascript来操作DOM元素，比如使用appendChild()方法。每次调用该方法时，浏览器都会重新渲染页面。如果大量的更新DOM节点，则会非常消耗性能，影响用户体验.
javascript提供了一个文档片段DocumentFragment的机制。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点。把所有要构造的节点都放在文档片段中执行，这样可以不影响文档树，也就不会造成页面渲染。当节点都构造完成后，再将文档片段对象添加到页面中，这时所有的节点都会一次性渲染出来，这样就能减少浏览器负担，提高页面渲染速度
解决办法：创建文档片段Fragment，将标签全部放入该片段中，再统一插入document，这样只会渲染一次
原文链接：https://blog.csdn.net/Tracy_frog/article/details/82903620
