juriad/page.html

## page.html
<html>
	<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
	<body>
	<script>
		function log(message) {
			$('#log').append('<li>'+message+'</li>');
		}

		function genContent(row, col, js) {
		return (js?'<script>$("#xxx");/*log("'+row+' x '+col+'");*/</'+'script>':'')+row+' x '+col;
		}

		function genTable(rows, cols, js) {
			var table = '<table>';
			for(r = 0; r<rows; r++) {
				table += '<tr class="'+(r%2==0?'even':'odd')+'">';
				for(c = 0; c<cols; c++) {
					table += '<td>' + genContent(r, c, js) + '</td>';
				}
				table += '</tr>';
			}
			table += '</table>';
			return table;
		}

		function genDiv(rows, cols, js) {
		var div = '<div id="xxx">'+genTable(rows, cols, true)+(js?'<script>log("newDiv");</'+'script>':'')+'</div>';
			return div;
		}

		function do1(jTable, content) {
			var t = new Date().getTime();

			var oldEl = jTable[0];
			var newEl = oldEl.cloneNode(false);
			newEl.innerHTML = content;
			oldEl.parentNode.replaceChild(newEl, oldEl);

			return new Date().getTime() - t;
		}

		function do2(jTable, content) {
			var t = new Date().getTime();

			jTable.replaceWith(content);

			return new Date().getTime() - t;
		}

		function do3(jTable, content) {
			var t = new Date().getTime();

			jTable[0].innerHTML = content;

			return new Date().getTime() - t;
		}

		function do4(jTable, content) {
			var t = new Date().getTime();

			jTable.html(content);

			return new Date().getTime() - t;
		}

		function test1(c, js) {
			var table = genDiv(100, 20, js);
			var time = 0;
			for(var i = 0; i<c; i++) {
				time += do1($('#xxx'), table);
			}
			log('1 took time '+time/c);
		}

		function test2(c, js) {
			var table = genDiv(100, 20, js);
			var time = 0;
			for(var i = 0; i<c; i++) {
				time += do2($('#xxx'), table);
			}
			log('2 took time '+time/c);
		}

		function test3(c, js) {
			var table = genDiv(100, 20, js);
			var time = 0;
			for(var i = 0; i<c; i++) {
				time += do3($('#xxx'), table);
			}
			log('3 took time '+time/c);
		}

		function test4(c, js) {
			var table = genDiv(100, 20, js);
			var time = 0;
			for(var i = 0; i<c; i++) {
				time += do4($('#xxx'), table);
			}
			log('4 took time '+time/c);
		}

		function doManual(jTable, content) {
			var t = new Date().getTime();

			do3(jTable, content);

			var scripts = $('#xxx').find('script');
			var scriptArray = [];
			for(var i = 0; i < scripts.length; i++) {
				scriptArray[i] = scripts[i].text;
			}

			script = scriptArray.join("\n");
			jQuery.globalEval(script);

			return new Date().getTime() - t;
		}

		function testManual(c, js) {
			var table = genDiv(100, 20, js);
			var time = 0;
			for(var i = 0; i<c; i++) {
				time += doManual($('#xxx'), table);
			}
			log('manual took time '+time/c);
		}

		$(function($) {
			setTimeout(function() {
				var newTable = genDiv(100, 20, true);

				$('#xxx').replaceWith(newTable);

				var tries = 5;
				var out = 1000;

				setTimeout(function() { test1(tries, false);
					setTimeout(function() {	test2(tries, false);
						setTimeout(function() {	test3(tries, false);
							setTimeout(function() { test4(tries, false);
								setTimeout(function() {	test1(tries, true);
									setTimeout(function() {	test2(tries, true);
										setTimeout(function() {	test3(tries, true);
											setTimeout(function() {	test4(tries, true);
												setTimeout(function() {	testManual(tries, false);
													setTimeout(function() {	testManual(tries, true);
													}, out);
												}, out);
											}, out);
										}, out);
									}, out);
								}, out);
							}, out);
						}, out);
					}, out);
				}, out);

			}, 3000);
		});
	</script>
	<div id="xxx"></div>
	<ul id="log"></ul>
	</body>
</html>
	<html>
	<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
	<body>
	<script>
	function log(message) {
	$('#log').append('<li>'+message+'</li>');
	}

	function genContent(row, col, js) {
	return (js?'<script>$("#xxx");/log("'+row+' x '+col+'");/</'+'script>':'')+row+' x '+col;
	}

	function genTable(rows, cols, js) {
	var table = '<table>';
	for(r = 0; r<rows; r++) {
	table += '<tr class="'+(r%2==0?'even':'odd')+'">';
	for(c = 0; c<cols; c++) {
	table += '<td>' + genContent(r, c, js) + '</td>';
	}
	table += '</tr>';
	}
	table += '</table>';
	return table;
	}

	function genDiv(rows, cols, js) {
	var div = '<div id="xxx">'+genTable(rows, cols, true)+(js?'<script>log("newDiv");</'+'script>':'')+'</div>';
	return div;
	}

	function do1(jTable, content) {
	var t = new Date().getTime();

	var oldEl = jTable[0];
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = content;
	oldEl.parentNode.replaceChild(newEl, oldEl);

	return new Date().getTime() - t;
	}

	function do2(jTable, content) {
	var t = new Date().getTime();

	jTable.replaceWith(content);

	return new Date().getTime() - t;
	}

	function do3(jTable, content) {
	var t = new Date().getTime();

	jTable[0].innerHTML = content;

	return new Date().getTime() - t;
	}

	function do4(jTable, content) {
	var t = new Date().getTime();

	jTable.html(content);

	return new Date().getTime() - t;
	}

	function test1(c, js) {
	var table = genDiv(100, 20, js);
	var time = 0;
	for(var i = 0; i<c; i++) {
	time += do1($('#xxx'), table);
	}
	log('1 took time '+time/c);
	}

	function test2(c, js) {
	var table = genDiv(100, 20, js);
	var time = 0;
	for(var i = 0; i<c; i++) {
	time += do2($('#xxx'), table);
	}
	log('2 took time '+time/c);
	}

	function test3(c, js) {
	var table = genDiv(100, 20, js);
	var time = 0;
	for(var i = 0; i<c; i++) {
	time += do3($('#xxx'), table);
	}
	log('3 took time '+time/c);
	}

	function test4(c, js) {
	var table = genDiv(100, 20, js);
	var time = 0;
	for(var i = 0; i<c; i++) {
	time += do4($('#xxx'), table);
	}
	log('4 took time '+time/c);
	}

	function doManual(jTable, content) {
	var t = new Date().getTime();

	do3(jTable, content);

	var scripts = $('#xxx').find('script');
	var scriptArray = [];
	for(var i = 0; i < scripts.length; i++) {
	scriptArray[i] = scripts[i].text;
	}

	script = scriptArray.join("\n");
	jQuery.globalEval(script);

	return new Date().getTime() - t;
	}

	function testManual(c, js) {
	var table = genDiv(100, 20, js);
	var time = 0;
	for(var i = 0; i<c; i++) {
	time += doManual($('#xxx'), table);
	}
	log('manual took time '+time/c);
	}

	$(function($) {
	setTimeout(function() {
	var newTable = genDiv(100, 20, true);

	$('#xxx').replaceWith(newTable);

	var tries = 5;
	var out = 1000;

	setTimeout(function() { test1(tries, false);
	setTimeout(function() { test2(tries, false);
	setTimeout(function() { test3(tries, false);
	setTimeout(function() { test4(tries, false);
	setTimeout(function() { test1(tries, true);
	setTimeout(function() { test2(tries, true);
	setTimeout(function() { test3(tries, true);
	setTimeout(function() { test4(tries, true);
	setTimeout(function() { testManual(tries, false);
	setTimeout(function() { testManual(tries, true);
	}, out);
	}, out);
	}, out);
	}, out);
	}, out);
	}, out);
	}, out);
	}, out);
	}, out);
	}, out);

	}, 3000);
	});
	</script>
	<div id="xxx"></div>
	<ul id="log"></ul>
	</body>
	</html>