JS中文档碎片的理解和使用
1、我们要明白当js操作dom时发生了什么?
每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减少"重排"
2、什么是文档碎片? document.createdocumentfragment() 一个容器,用于暂时存放创建的dom元素
3、文档碎片有什么用? 将需要添加的大量元素 先添加到文档碎片中,再将文档碎片添加到需要插入的位置,大大 减少dom操作,提高性能(ie和火狐比较明显)
比如需要往页面上放100个元素:
普通方式:(操作了100次dom)
for(var i=100; i>0; i--){
var elem = document.createelement('div');
document.body.appendchild(elem);//放到body中 }
文档碎片:(操作1次dom)
var df = document.createdocumentfragment();
for(var i=100; i>0; i--){
var elem = document.createelement('div');
df.appendchild(elem); }
//最后放入到页面上
document.body.appendchild(df);
上一篇: 使用html2canvas将html标签转化为图片
下一篇: Vue 组件之间传值