NV/modify-text-bench.html

## modify-text-bench.html
<html>
<head>
  <title>modify text bench</title>
</head>

<body>
<table>
  <tr>
    <td>div.appendChild(document.createTextNode( text ))</td>
    <td id="text_node"></td>
  </tr>
  <tr>
    <td>div.textContent += text</td>
    <td id="text_content"></td>
  </tr>
  <tr>
    <td>div.firstChild.data += text</td>
    <td id="text_data"></td>
  </tr>
  <tr>
    <td>div.innerHTML += text</td>
    <td id="inner_html"></td>
  </tr>
</table>

<script>
var ITERATIONS = 5000;

var text_node = document.getElementById("text_node");
var text_content = document.getElementById("text_content");
var text_data = document.getElementById("text_data");
var inner_html = document.getElementById("inner_html");

function textNode(){
  var div = document.createElement("div");
  var start = new Date;
  for (var i=0; i<ITERATIONS; ++i) {
    div.appendChild(document.createTextNode(i));
  }
  var end = new Date;
  text_node.textContent = end - start + "ms";
}

function textContent(){
  var div = document.createElement("div");
  var start = new Date;
  for (var i=0; i<ITERATIONS; ++i) {
    div.textContent += i;
  }
  var end = new Date;
  text_content.textContent = end - start + "ms";
}

function textData(){
  var div = document.createElement("div");
  var start = new Date;
  div.appendChild(document.createTextNode(""));
  for (var i=0; i<ITERATIONS; ++i) {
    div.firstChild.data += i;
  }
  var end = new Date;
  text_data.textContent = end - start + "ms";
}

function textInnerHTML(){
  var div = document.createElement("div");
  var start = new Date;
  for (var i=0; i<ITERATIONS; ++i) {
    div.innerHTML += i;
  }
  var end = new Date;
  inner_html.textContent = end - start + "ms";
}

textNode()
textContent()
textData();
textInnerHTML();
</script>
</body>
</html>
	<html>
	<head>
	<title>modify text bench</title>
	</head>

	<body>
	<table>
	<tr>
	<td>div.appendChild(document.createTextNode( text ))</td>
	<td id="text_node"></td>
	</tr>
	<tr>
	<td>div.textContent += text</td>
	<td id="text_content"></td>
	</tr>
	<tr>
	<td>div.firstChild.data += text</td>
	<td id="text_data"></td>
	</tr>
	<tr>
	<td>div.innerHTML += text</td>
	<td id="inner_html"></td>
	</tr>
	</table>

	<script>
	var ITERATIONS = 5000;

	var text_node = document.getElementById("text_node");
	var text_content = document.getElementById("text_content");
	var text_data = document.getElementById("text_data");
	var inner_html = document.getElementById("inner_html");

	function textNode(){
	var div = document.createElement("div");
	var start = new Date;
	for (var i=0; i<ITERATIONS; ++i) {
	div.appendChild(document.createTextNode(i));
	}
	var end = new Date;
	text_node.textContent = end - start + "ms";
	}

	function textContent(){
	var div = document.createElement("div");
	var start = new Date;
	for (var i=0; i<ITERATIONS; ++i) {
	div.textContent += i;
	}
	var end = new Date;
	text_content.textContent = end - start + "ms";
	}

	function textData(){
	var div = document.createElement("div");
	var start = new Date;
	div.appendChild(document.createTextNode(""));
	for (var i=0; i<ITERATIONS; ++i) {
	div.firstChild.data += i;
	}
	var end = new Date;
	text_data.textContent = end - start + "ms";
	}

	function textInnerHTML(){
	var div = document.createElement("div");
	var start = new Date;
	for (var i=0; i<ITERATIONS; ++i) {
	div.innerHTML += i;
	}
	var end = new Date;
	inner_html.textContent = end - start + "ms";
	}

	textNode()
	textContent()
	textData();
	textInnerHTML();
	</script>
	</body>
	</html>