JS性能优化之创建文档碎片(document.createDocumentFragment)
来源:互联网 发布:我想在淘宝上卖东西该怎么办 编辑:程序博客网 时间:2024/06/08 08:54
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。
在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下:
for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body.appendChild(op); }
但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。
当然,你也可以建个新的节点,比如说div,先将oP添加到div上,然后再将div添加到body中.但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点.
var oDiv = document.createElement("div"); for(var i=0;i<10000;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); oDiv.appendChild(op); } document.body.appendChild(oDiv);
为了解决这个问题,我们可以引入createDocumentFragment()方法,它的作用是创建一个文档碎片,把要插入的新节点先附加在它上面,然后再一次性添加到document中。代码如下:
代码如下:
//先创建文档碎片var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); //先附加在文档碎片中 oFragmeng.appendChild(op); } //最后一次性添加到document中document.body.appendChild(oFragmeng);
经过测试,在ie,firefox下性能明显得以提高。大家可以自己测试下。
前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。
PS:这个优化跟循环添加html代码有点类似。
0 0
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- JS性能优化之文档碎片-document.createDocumentFragment
- JS性能优化之文档碎片创建
- js 性能优化tips-document.createDocumentFragment
- 创建文档碎片节点createDocumentFragment()并显示
- JavaScript 性能优化之文档碎片
- js创建文档碎片
- document.createDocumentFragment()与js效率
- (转)document.createDocumentFragment()与js效率
- 提升性能-文档碎片
- 有关文档碎片(document fragment)的用法
- js创建dom节点之最容易被忽略的createDocumentFragment()方法
- document的createDocumentFragment()方法
- document的createDocumentFragment()方法
- document的createDocumentFragment()方法
- document的createDocumentFragment()方法
- document.createDocumentFragment()的用法
- document.createDocumentFragment()的用法
- Xcode清理缓存和垃圾文件
- JSP (java server page) servlet生命周期
- Win10 将开启“游戏模式”
- 删数问题
- win7 装固态升级win10 心得
- JS性能优化之创建文档碎片(document.createDocumentFragment)
- 185
- PHP性能测试工具xhprof的安装和使用
- 关于 排序 两三事
- Java 中的Synchronized解析
- enum
- 广义表 头尾表示法表示
- 线性代数,机器学习,笔记!!!
- 东风尕玩儿