JavaScript性能优化创建文档碎片(document.createDocumentFragment)
2023-06-13 09:14:23 时间
在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下:
复制代码代码如下:
for(vari=0;i<5;i++){
varop=document.createElement("span");
varoText=document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。
为了解决这个问题,我们可以引入createDocumentFragment()方法,它的作用是创建一个文档碎片,把要插入的新节点先附加在它上面,然后再一次性添加到document中。代码如下:
varoFragmeng=document.createDocumentFragment();//先创建文档碎片
for(vari=0;i<10000;i++){
varop=document.createElement("span");
varoText=document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op);//先附加在文档碎片中
}
document.body.appendChild(oFragmeng);//最后一次性添加到document中
经过测试,在ie,firefox下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。
PS:这个优化跟循环添加html代码有点类似。
相关文章
- 内卷时代下的前端技术-使用JavaScript在浏览器中生成PDF文档
- 分享 20 个 Javascript 中的数组方法,收藏
- 用javascript分类刷leetcode-排序算法(图文视频讲解)
- 谈谈javascript中的流程控制语句详解编程语言
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- Javascript-Mozilla和IE中的一个函数直接量的问题
- 有一段有意思的代码-javascript现实多行信息
- Javascript常用运算符(Operators)-javascript基础教程
- JavaScript中的Document文档对象
- Javascript入门学习第一篇js基础
- javascript文档的编码问题解决
- javaScript读取和设置文档元素的样式属性
- javascript带有滚动条的表格,标题固定,带排序功能.
- isArray()函数(JavaScript中对象类型判断的几种方法)
- Javascript学习笔记9prototype封装继承
- 改变javascript函数内部this指针指向的三种方法
- JavaScript设计模式富有表现力的Javascript(一)
- javascript触发HTML元素绑定的函数
- javascript使用eval或者newFunction进行语法检查
- 让jQuery与其他JavaScript库并存避免冲突的方法
- Javascript按位取反运算符(~)
- javascript打开word文档的方法