大量插入dom元素的方法(性能问题)

笔试的时候做到一道题:

<ul id="root"></ul>插入1000条<li>我是li标签</li>标签

一般我们会想到使用循环,但是,由于渲染回流,在for循环内部多次appendChild会造成多次渲染,从而出现卡、闪屏的现象

我们经常使用javascript来操作DOM元素,比如使用appendChild()方法。
每次调用该方法时,浏览器都会重新渲染页面。如果大量的更新DOM节点,则会非常消耗性能,影响用户体验.
javascript提供了一个文档碎片DocumentFragment的机制。
如果将文档中的节点添加到文档片段中,就会从文档树中移除该节点。

把所有要构造的节点都放在文档片段中执行,这样可以不影响文档树,也就不会造成页面渲染。
当节点都构造完成后,再将文档片段对象添加到页面中,这时所有的节点都会一次性渲染出来,
这样就能减少浏览器负担,提高页面渲染速度

解决办法:创建文档片段Fragment,将标签全部放入该片段中,再统一插入document,这样只会渲染一次

<ul id="root"></ul>
<script>
var root = document.getElementById('root')
var fragment = document.createDocumentFragment()
for(let i = 0; i < 1000; i++){
	let li = document.createElement('li')
	li.innerHTML = '我是li标签'
    fragment.appendChild(li)
}
root.appendChild(fragment);
</script>

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页