趣味は車輪の再発明♪

どれが速いの?DOM要素の大量挿入.js



HTMLのDIV要素を1000個生成して追加(挿入)するjavascriptの実行時間を、方法別に計測しています。

要素の生成処理と追加処理の両方が計測されています。

再実行するには、ページを再読み込みしてください。


1000個のDIVを追加するjavascriptの実行時間
No. 処理内容 実行時間
1 jQuery的に素直なパターン
		for(var i = 0; i < 1000; i++) {
			$('#container').append(
					$('<div/>').html('DIV#'+i));
		}
		
2 普通にベタにappendChild
		var container =
				document.getElementById('container');
		for(var i = 0; i < 1000; i++) {
		  var el = document.createElement('DIV');
		  el.innerHTML = 'DIV#'+i;
		  container.appendChild(el);
		}
		
3 insertAdjacentHTMLで複数回追加
		var container =
				document.getElementById('container');
		for(var i = 0; i < 1000; i++) {
			container.insertAdjacentHTML(
				'before-end',
				'<div>DIV#'+i+'<div/>');
		}
		
4 jQueryで一発append
		var $elements = [];
		for(var i = 0; i < 1000; i++) {
		  $elements.push($('<div/>').html('DIV#'+i));
		}
		$('#container').append($elements);
		
5 jQueryで一発生成&追加
		var html = [];
		for(var i = 0; i < 1000; i++) {
		  html.push('<div>DIV#'+i+'<div/>');
		}
		$('#container').append($(html.join('')));
		
6 innerHTMLへの代入
		var html = [];
		for(var i = 0; i < 1000; i++) {
		  html.push('<div>DIV#'+i+'<div/>');
		}
		var container =
				document.getElementById('container');
		container.innerHTML = html.join('');
		
7 insertAdjacentHTMLで一度に追加
		var html = [];
		for(var i = 0; i < 1000; i++) {
		  html.push('<div>DIV#'+i+'<div/>');
		}
		var container =
				document.getElementById('container');
		container.insertAdjacentHTML(
				'before-end', html.join(''));
		

以下に単なるDIVが1000個入っています。



RSS Feed Widget
どれが速いの?DOM要素の大量挿入.js
(http://bicycle.life.coocan.jp/takamints/index.php/techtips/whichFastAppendChild)
by Koji Takami ( email: vzg03566@gmail.com, GitHub: takamin )