Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment