Skip to content

Instantly share code, notes, and snippets.

@zsimo

zsimo/render_speed_test.css

Last active October 12, 2017 21:18
Show Gist options
  • Save zsimo/30ac12df629277aa29ca to your computer and use it in GitHub Desktop.
Save zsimo/30ac12df629277aa29ca to your computer and use it in GitHub Desktop.
Download ZIP
Raw
render_speed_test.css
div {
background: lightblue;
height: 20px;
width: 200px;
margin: 2px;
}
Raw
render_speed_test.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
div {
background: lightblue;
height: 20px;
width: 200px;
margin: 2px;
}
</style>
</head>
<body>
<input id="how-many"/>
<button id="start">start</button>
<br>
<span id="content"></span>
<script id="jsbin-javascript">
var content = document.getElementById("content"),
start;
document.getElementById("start").onclick = function () {
var howMany = document.getElementById("how-many").value;
var i;
// reset
content.innerHTML = "";
// TEST 01
// start = Date.now();
// for (var i = 0; i < howMany; i += 1) {
// content.innerHTML += '<div id="div-'+ i +'">div ' + i + '</div>';
// }
// console.log("content.innerHTML += time: " + (Date.now() - start));
// // reset
// content.innerHTML = "";
// TEST 02
start = Date.now();
var newContent = "";
for (i = 0; i < howMany; i += 1) {
newContent += '<div id="div-'+ i +'" >div ' + i + '</div>';
}
content.innerHTML = newContent;
console.log("newContent += -> time: " + (Date.now() - start));
// reset
content.innerHTML = "";
// TEST 03
start = Date.now();
for (i = 0; i < howMany; i += 1) {
var newEl = document.createElement("div");
newEl.id = "div-" + i;
newEl.innerHTML = "div: " + i;
newEl.name = "pippo";
content.appendChild(newEl);
}
console.log("createElement -> time: " + (Date.now() - start));
console.log("- - - - divs has been created - - - -");
// TEST 04 - getElementById
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.getElementById("div-" + i);
}
console.log("getElementById -> time: " + (Date.now() - start));
// TEST 05 - $ simple id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
$("#div-" + i);
}
console.log("$ id only -> time: " + (Date.now() - start));
// TEST 06 - querySelector simple id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.querySelector("#div-" + i);
}
console.log("querySelector id only -> time: " + (Date.now() - start));
// TEST 07 - $ tag + id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
$("div#div-" + i);
}
console.log("$ tag + id -> time: " + (Date.now() - start));
// TEST 08 - querySelector tag + id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.querySelector("div#div-" + i);
}
console.log("querySelector tag + id -> time: " + (Date.now() - start));
console.log("- - - - - - - - - - - - - - - - - - - ");
};
document.onkeydown = function (event) {
if (event.keyCode === 13) {
document.getElementById("start").click();
}
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="how-many"/>
<button id="start">start</button>
<br>
<span id="content"></span>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">div {
background: lightblue;
height: 20px;
width: 200px;
margin: 2px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var content = document.getElementById("content"),
start;
document.getElementById("start").onclick = function () {
var howMany = document.getElementById("how-many").value;
var i;
// reset
content.innerHTML = "";
// TEST 01
// start = Date.now();
// for (var i = 0; i < howMany; i += 1) {
// content.innerHTML += '<div id="div-'+ i +'">div ' + i + '</div>';
// }
// console.log("content.innerHTML += time: " + (Date.now() - start));
// // reset
// content.innerHTML = "";
// TEST 02
start = Date.now();
var newContent = "";
for (i = 0; i < howMany; i += 1) {
newContent += '<div id="div-'+ i +'" >div ' + i + '</div>';
}
content.innerHTML = newContent;
console.log("newContent += -> time: " + (Date.now() - start));
// reset
content.innerHTML = "";
// TEST 03
start = Date.now();
for (i = 0; i < howMany; i += 1) {
var newEl = document.createElement("div");
newEl.id = "div-" + i;
newEl.innerHTML = "div: " + i;
newEl.name = "pippo";
content.appendChild(newEl);
}
console.log("createElement -> time: " + (Date.now() - start));
console.log("- - - - divs has been created - - - -");
// TEST 04 - getElementById
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.getElementById("div-" + i);
}
console.log("getElementById -> time: " + (Date.now() - start));
// TEST 05 - $ simple id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
$("#div-" + i);
}
console.log("$ id only -> time: " + (Date.now() - start));
// TEST 06 - querySelector simple id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.querySelector("#div-" + i);
}
console.log("querySelector id only -> time: " + (Date.now() - start));
// TEST 07 - $ tag + id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
$("div#div-" + i);
}
console.log("$ tag + id -> time: " + (Date.now() - start));
// TEST 08 - querySelector tag + id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.querySelector("div#div-" + i);
}
console.log("querySelector tag + id -> time: " + (Date.now() - start));
console.log("- - - - - - - - - - - - - - - - - - - ");
};
document.onkeydown = function (event) {
if (event.keyCode === 13) {
document.getElementById("start").click();
}
};
</script></body>
</html>
Raw
render_speed_test.js
var content = document.getElementById("content"),
start;
document.getElementById("start").onclick = function () {
var howMany = document.getElementById("how-many").value;
var i;
// reset
content.innerHTML = "";
// TEST 01
// start = Date.now();
// for (var i = 0; i < howMany; i += 1) {
// content.innerHTML += '<div id="div-'+ i +'">div ' + i + '</div>';
// }
// console.log("content.innerHTML += time: " + (Date.now() - start));
// // reset
// content.innerHTML = "";
// TEST 02
start = Date.now();
var newContent = "";
for (i = 0; i < howMany; i += 1) {
newContent += '<div id="div-'+ i +'" >div ' + i + '</div>';
}
content.innerHTML = newContent;
console.log("newContent += -> time: " + (Date.now() - start));
// reset
content.innerHTML = "";
// TEST 03
start = Date.now();
for (i = 0; i < howMany; i += 1) {
var newEl = document.createElement("div");
newEl.id = "div-" + i;
newEl.innerHTML = "div: " + i;
newEl.name = "pippo";
content.appendChild(newEl);
}
console.log("createElement -> time: " + (Date.now() - start));
console.log("- - - - divs has been created - - - -");
// TEST 04 - getElementById
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.getElementById("div-" + i);
}
console.log("getElementById -> time: " + (Date.now() - start));
// TEST 05 - $ simple id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
$("#div-" + i);
}
console.log("$ id only -> time: " + (Date.now() - start));
// TEST 06 - querySelector simple id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.querySelector("#div-" + i);
}
console.log("querySelector id only -> time: " + (Date.now() - start));
// TEST 07 - $ tag + id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
$("div#div-" + i);
}
console.log("$ tag + id -> time: " + (Date.now() - start));
// TEST 08 - querySelector tag + id
start = Date.now();
for (i = 0; i < howMany; i += 1) {
document.querySelector("div#div-" + i);
}
console.log("querySelector tag + id -> time: " + (Date.now() - start));
console.log("- - - - - - - - - - - - - - - - - - - ");
};
document.onkeydown = function (event) {
if (event.keyCode === 13) {
document.getElementById("start").click();
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment