-
Notifications
You must be signed in to change notification settings - Fork 0
/
benchmark.js
65 lines (52 loc) · 1.61 KB
/
benchmark.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const BENCHMARK = {
threshold: 40000
};
document.addEventListener('DOMContentLoaded', () => {
console.log(`%c Benchmark started for ${BENCHMARK.threshold} cases...`, 'background: #000; color: #fff; font-size: 20px');
stringApproach();
domApproach();
documentFragmentApproach();
});
function stringApproach() {
let start = new Date();
let result = '';
let a;
for (let i = 0; i < BENCHMARK.threshold; i++) {
a = `<a href='/' style='display: block'>Link #${i}`;
result = result.concat(a);
}
const ground1 = document.getElementById('ground-1');
ground1.innerHTML = result;
let end = new Date();
console.log('STRING', end - start);
}
function domApproach() {
let start = new Date();
let a;
const ground2 = document.getElementById('ground-2');
for (let i = 0; i < BENCHMARK.threshold; i++) {
a = document.createElement('a');
a.href = '/'
a.innerHTML = 'Link #' + i;
a.style.display = 'block';
ground2.appendChild(a);
}
let end = new Date();
console.log('DOM', end - start);
}
function documentFragmentApproach() {
let start = new Date();
let a;
let fragment = document.createDocumentFragment();
const ground3 = document.getElementById('ground-3');
for (let i = 0; i < BENCHMARK.threshold; i++) {
a = document.createElement('a');
a.href = '/'
a.innerHTML = 'Link #' + i;
a.style.display = 'block';
fragment.appendChild(a);
}
ground3.appendChild(fragment);
let end = new Date();
console.log('DOCUMENTFRAGMENT', end - start);
}