JS性能优化之文档碎片-document.createDocumentFragment

讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。
在浏览器中，我们一旦把节点添加到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代码有点类似。

JS性能优化之文档碎片-document.createDocumentFragment相关推荐

web前端分享：性能优化之文档碎片处理
有不少同学在前端开发面试的时候会被问到性能优化的相关问题,做好优化是一件非常重要的事情,今天小千就来给大家介绍一下文档碎片的处理方式. 性能优化之文档碎片一般情况下,在操作DOM结构的时候,经常会说 ...
JQuery创建文档碎片
(1)文档碎片可以提高DOM的操作性能.比如要插入一万个li标签,如果没有文档碎片,就必须插入一个然后页面渲染一次,插入完全部就要渲染一万次,太损耗性能.利用文档碎片,可以先把需要修改的全部放入文档碎 ...
有关文档碎片（document fragment）的用法
通常情况下修改.删除或者增加DOM元素.更新DOM会导致浏览器重新绘制屏幕,也会导致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量减少更新DOM,这也就意味着将DOM的改变分批处理, ...
我总结的js性能优化的小知识
阅读目录前言避免全局查找定时器字符串连接避免with语句数字转换成字符串浮点数转换成整型各种类型转换多个类型声明插入迭代器使用直接量使用DocumentFragment优化多次 ...
Node.js性能优化
你不知道的Node.js性能优化 - 知乎 https://zhuanlan.zhihu.com/p/50055740 你不知道的Node.js性能优化 "当我第一次知道要写这篇文章的时候, ...
html5在线显示word文档,JS实现获取word文档内容并输出显示到html页面示例
本文实例讲述了js实现获取word文档内容并输出显示到html页面.分享给大家供大家参考,具体如下: title var w = new activexobject('word.application ...
pdf.js在线查看（文档流／地址）
pdf.js在线查看(文档流/地址) 工作中需要在移动端在线查看pdf文件,但由于pdf文件存放在第三方的服务器中,由于各种原因无法直接返回pdf文件地址给前台,后来确定返给前台是一个base64的流 ...
【办公常用软件有哪些】万彩办公大师教程丨扫描PDF转优化帮助文档
关于万彩办公大师的扫描PDF转优化工具扫描PDF转优化工具可以高效地优化扫描的PDF文档.这款工具不仅能使PDF文档中扫描的图像去扭斜,还能快速删除PDF中未使用的空白页.除此之外,可以将扫描的PD ...
JS实现获取word文档内容并输出显示到html页面示例，和将页面数据写入txt文件
JS实现获取word文档内容并输出显示到html页面示例注意:这里使用了ActiveXObject组建,因此需要使用IE内核浏览器运行本代码. <!DOCTYPE html> <h ...

JS性能优化之文档碎片-document.createDocumentFragment

JS性能优化之文档碎片-document.createDocumentFragment相关推荐

最新文章

热门文章