Adding DOM elements to document

1、JavaScript 添加DOM Element 执行效率比较：

抄自：http://wildbit.com/blog/2006/11/21/javascript-optimization-adding-dom-elements-to-document

 

JavaScript optimization: Adding DOM elements to document

Scenario: you’re developing rich Web application and you need to load dynamic elements using AJAX and then add them to current document. For some reason you don’t want (or can’t) use fully generated HTML, and decided to fetch items in JavaScript array.

I know two classic ways to do so: create elements using document.createElement()method and concatenate HTML strings and assign result to parentElement.innerHTMLproperty. Of course, you can combine both ways. Let’s examine these ways in detail.

Classic way (and in ideal world the best way) is to use DOM for element manipulations:

for (var i = 1; i < = 1000; i++) {
var li = document.createElement('li');
  li.appendChild(document.createTextNode('Element ' + i));
  el.appendChild(li);
}

I got 1403 ms in Internet Explorer 6 and 165 ms in Firefox 1.5. Not so bad, but what about creating DOM element from HTML code?

for (var i = 1; i < = 1000; i++) {
  var li = document.createElement('<li>Element ' + i + ')
  el.appendChild(li);
}

It works better in Internet Explorer (1134 ms), but does not work in Firefox at all. Weird! Of course, you can add try/catch block and create elements using first approach in catch block for Firefox. But I have a better solution.

Every DOM node has the attribute innerHTML which holds all child nodes as an HTML string.

el.innerHTML = '';
for (var i = 1; i < = 1000; i++) {
  el.innerHTML += '<li>Element ' + i + '';
}

Wow, 39757 ms in Internet Explorer and 41058 ms in Firefox! Cool result, right? It's because browser tried to render list while we updating and it takes such a long time. Little optimization:

var html = '';
for (var i = 1; i < = 1000; i++) {
  html += '<li>Element ' + i + '';
}
el.innerHTML = html;

Firefox shows great performance, 50 ms, but Internet Explorer still slow – 10994 ms. I found solution which works very fast in both browsers: to create array of HTML chunks, and the join them using empty string:

var html = [];
for (var i = 1; i < = 1000; i++) {
  html.push('<li>Element ');
  html.push(i);
  html.push('');
}
el.innerHTML = html.join('');

It’s fastest approach for Internet Explorer 6 – 407 ms, and very fast in Firefox – 47 ms. Why I’m not saying fastest in case of Firefox? I added another test to make in cleaner:

var html = '';
for (var i = 1; i < = 1000; i++) {
  html += '<li style="padding-left: ' + (i % 50) + '" id="item-' + i + '">Element ' + i + ' Column ' + (i % 50) + '';
}
el.innerHTML = html;

And second example:

var html = [];
for (var i = 1; i < = 1000; i++) {
  html.push('<li style="padding-left: ');
  html.push(i % 50);
  html.push('" id="item-');
  html.push(i);
  html.push('">Element ');
  html.push(i);
  html.push(' Column ');
  html.push(i % 50);
  html.push('');
}
el.innerHTML = html.join('');

84 ms for the first example and 110 ms for the second.

Here is results in table and diagram formats.

No	Method	Internet Explorer 6	Firefox 1.5
1	document.createElement()	1403	166
2	document.createElement() Full	1134	—
3	element.innerHTML	39757	41058
4	element.innerHTML Optimized	10994	50
5	element.innerHTML Join	400	47
6	element.innerHTML Optimized Large	28934	84
7	element.innerHTML Join Large	950	110

 

 

结论：通过数组的方式会提高执行效率。

 

 

2、JavaScript DocumentFragment：更快捷的操作DOM的途径

抄自：http://itindex.net/detail/49284-javascript-documentfragment-dom

DocumentFragment例子

我们要使用UL元素，然后往里面插入LI元素：

<ul id="list"></ul>

DOM插入和修改是一个很费力耗时的工作，所以，这样的交互越少越好。这就是DocumentFragment发挥功用的地方了。第一步我们先创建一个DocumentFragment：

// Create the fragment
var frag = document.createDocumentFragment();

DocumentFragment实际上像一个伪DOM节点，在这个例子里你可以把它当成虚拟的UL元素。现在，我们开始往里面加入元素：

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
	var li = document.createElement("li");
	li.innerHTML = "List item " + x;
	frag.appendChild(li);
}

往DocumentFragment里添加元素就跟你操作普通的DOM节点一样。一旦页面DOM加载完成，你可以访问了，你就可以把DocumentFragement挂到它的父节点上：

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

使用DocumentFragement要比直接对DOM节点操作要快的多，而且程序员可以利用新DOM节点来操作DocumentFragement，这样比操作整个页面DOM要更容易。所以，当需要进行大量DOM操作时，尽量使用DocumentFragement，它会让你的应用变的更快！

 

结合以上文章可以发现：结合使用 

DocumentFragment 

数组

可大大提高执行效率。