讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。
在浏览器中,我们一旦把节点添加到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代码有点类似。
相关推荐
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。
为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。这是我写的一个简单的测试页面: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ...
documentFragment 是一個無父對象的document對象.
后来是一技术群问到以下一段代码: 代码... var df = document.createDocumentFragment(); while (d.firstChild) df.appendChild(d.firstChild); return df; } 大概的原理都明白,比较困惑的是为什么要用 document.cre
一个小的DOM实现,其中实现了文档中的大多数DOM属性和方法。 例子 var document = require ( "dom-lite" ) . document ; var el = document . createElement ( "h1" ) ; el . id = 123 ; el . className = "large" ...
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题,比如: 代码如下: var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”...
代码如下: function asyncInnerHTML(HTML, callback) { var temp = document.createElement(‘div’), frag = document.createDocumentFragment(); temp[removed] = HTML;//要加入的内容先放到这里。 (function(){ ...
但是这样做就不利于插件的移植,所以就写了这个函数用来动态产生Css.... }else{ var Frag=document.createDocumentFragment(); Frag.appendChild(document.createTextNode(c)); Sty.appendChild(Frag); } document.get
节点集合 by 司徒正美 #aaa { padding:10px; border:1px solid red;... 代码如下: [removed] = function(){ var d = document.createDocumentFragment(); var div = document.getElementById(“aaa”); var c
var fragment = document.createDocumentFragment(); var li; for (var i = 0; i ; i ) { li = document.createElement('li'); li.className = 'mui-table-view-cell'; li[removed] = '第' (index 1) '个选项...
html5shiv.js 这包括基本的createElement() shiv 技术,以及用于document.createElement和document.createDocumentFragment monkeypatches。 它还适用于 HTML5 元素的。 #### html5shiv-printshiv.js 这包括上述所有...
html5shiv.js 这包括基本的createElement() shiv技术,以及用于IE6-8的document.createElement和document.createDocumentFragment的monkeypatches。 它还为IE6-9,Safari 4.x和FF 3.xHTML5元素应用了。 #### ...
创建此表的原因是由于呈现了一些较大的表,这些表阻塞了UI。 块使您可以指定自己愿意的时间,然后再回到事件循环以允许其他进程运行。 // Create a large array of numbers var data = new Array ( 50000 ) . fill...
html5shiv.js 这包括基本的createElement() shiv技术,以及用于IE6-8的document.createElement和document.createDocumentFragment的Monkeypatches。 它还为IE6-9,Safari 4.x和FF 3.xHTML5元素应用了。...
这包括基本的createElement() shiv技术,以及用于IE6-8的document.createElement和document.createDocumentFragment的monkeypatches。 它还为IE6-9,Safari 4.x和FF 3.xHTML5元素应用了。 html5shiv-printshiv.js ...
练习您的工作是创建一个代表财务顾问的对象,并具有以下属性和方法。 公司(可枚举,可写,财产)专业(可枚举,可写,财产)名称... 遍历顾问的投资组合,并使用document.createDocumentFragment和document.create