Skip to content

Commit 1b56716

Browse files
benfrainbenfrain
committed
added createElement tests
1 parent ba19235 commit 1b56716

File tree

6 files changed

+231
-0
lines changed

6 files changed

+231
-0
lines changed

Diff for: ‎createElements/a-test.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>benfrain.com performance test</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
.a-a {
10+
height: 30px;
11+
width: 100%;
12+
background-color: wheat;
13+
border-bottom: 1px solid #f90;
14+
display: block;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<h1>HTML test. Everything below is made via JS</h1>
20+
<script>
21+
;(function TimeThisMother() {
22+
window.onload = function(){
23+
setTimeout(function(){
24+
var t = performance.timing;
25+
for (var index = 0; index < 200000; index++) {
26+
var makeDiv = document.createElement("a");
27+
makeDiv.classList.add('a-a');
28+
makeDiv.textContent = 'this is a number ' + index;
29+
document.body.appendChild(makeDiv);
30+
}
31+
console.log("Speed of creation is: " + ( (t.loadEventEnd - t.responseEnd) / 1000) + " seconds");
32+
}, 0);
33+
};
34+
})();
35+
</script>
36+
</body>
37+
</html>

Diff for: ‎createElements/button-test.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>benfrain.com performance test</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
button.a-button {
10+
height: 30px;
11+
width: 100%;
12+
display: block;
13+
font: inherit;
14+
text-align: initial;
15+
padding: 0;
16+
box-sizing: content-box;
17+
border: 0;
18+
outline: 0;
19+
background-color: wheat;
20+
border-bottom: 1px solid #f90;
21+
text-transform: inherit;
22+
text-rendering: inherit;
23+
letter-spacing: inherit;
24+
text-indent: inherit;
25+
-webkit-appearance: none;
26+
-moz-appearance: none;
27+
appearance: none;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<h1>HTML test. Everything below is made via JS</h1>
33+
<script>
34+
;(function TimeThisMother() {
35+
window.onload = function(){
36+
setTimeout(function(){
37+
var t = performance.timing;
38+
for (var index = 0; index < 200000; index++) {
39+
var makeDiv = document.createElement("button");
40+
makeDiv.classList.add('a-button');
41+
makeDiv.textContent = 'this is button number ' + index;
42+
document.body.appendChild(makeDiv);
43+
}
44+
console.log("JS took: " + ( (t.loadEventEnd - t.responseEnd) / 1000) + " seconds to create the elements");
45+
}, 0);
46+
};
47+
})();
48+
</script>
49+
</body>
50+
</html>

Diff for: ‎createElements/div-test.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>benfrain.com performance test</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
.a-div {
10+
height: 30px;
11+
width: 100%;
12+
background-color: wheat;
13+
border-bottom: 1px solid #f90;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>HTML test. Everything below is made via JS</h1>
19+
<script>
20+
;(function TimeThisMother() {
21+
window.onload = function(){
22+
setTimeout(function(){
23+
var t = performance.timing;
24+
for (var index = 0; index < 200000; index++) {
25+
var makeDiv = document.createElement("div");
26+
makeDiv.classList.add('a-div');
27+
makeDiv.textContent = 'this is div number ' + index;
28+
document.body.appendChild(makeDiv);
29+
}
30+
console.log("Speed of creation is: " + ( (t.loadEventEnd - t.responseEnd) / 1000) + " seconds");
31+
}, 0);
32+
};
33+
})();
34+
</script>
35+
</body>
36+
</html>

Diff for: ‎createElements/header-test.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>benfrain.com performance test</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
.a-header {
10+
height: 30px;
11+
width: 100%;
12+
background-color: wheat;
13+
border-bottom: 1px solid #f90;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>HTML test. Everything below is made via JS</h1>
19+
<script>
20+
;(function TimeThisMother() {
21+
window.onload = function(){
22+
setTimeout(function(){
23+
var t = performance.timing;
24+
for (var index = 0; index < 200000; index++) {
25+
var makeDiv = document.createElement("header");
26+
makeDiv.classList.add('a-header');
27+
makeDiv.textContent = 'this is header number ' + index;
28+
document.body.appendChild(makeDiv);
29+
}
30+
console.log("JS took: " + ( (t.loadEventEnd - t.responseEnd) / 1000) + " seconds to create the elements");
31+
}, 0);
32+
};
33+
})();
34+
</script>
35+
</body>
36+
</html>

Diff for: ‎createElements/nav-test.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>benfrain.com performance test</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
.a-nav {
10+
height: 30px;
11+
width: 100%;
12+
background-color: wheat;
13+
border-bottom: 1px solid #f90;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>HTML test. Everything below is made via JS</h1>
19+
<script>
20+
;(function TimeThisMother() {
21+
window.onload = function(){
22+
setTimeout(function(){
23+
var t = performance.timing;
24+
for (var index = 0; index < 200000; index++) {
25+
var makeDiv = document.createElement("nav");
26+
makeDiv.classList.add('a-nav');
27+
makeDiv.textContent = 'this is nav number ' + index;
28+
document.body.appendChild(makeDiv);
29+
}
30+
console.log("Speed of creation is: " + ( (t.loadEventEnd - t.responseEnd) / 100) + " seconds");
31+
}, 0);
32+
};
33+
})();
34+
</script>
35+
</body>
36+
</html>

Diff for: ‎createElements/section-test.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html class="no-js">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>benfrain.com performance test</title>
6+
<meta name="description" content="">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<style>
9+
.a-section {
10+
height: 30px;
11+
width: 100%;
12+
background-color: wheat;
13+
border-bottom: 1px solid #f90;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>HTML test. Everything below is made via JS</h1>
19+
<script>
20+
;(function TimeThisMother() {
21+
window.onload = function(){
22+
setTimeout(function(){
23+
var t = performance.timing;
24+
for (var index = 0; index < 200000; index++) {
25+
var makeDiv = document.createElement("section");
26+
makeDiv.classList.add('a-section');
27+
makeDiv.textContent = 'this is section number ' + index;
28+
document.body.appendChild(makeDiv);
29+
}
30+
console.log("Speed of creation is: " + ( (t.loadEventEnd - t.responseEnd) / 1000) + " seconds");
31+
}, 0);
32+
};
33+
})();
34+
</script>
35+
</body>
36+
</html>

0 commit comments

Comments
 (0)