Skip to content

Commit 7b0c35b

Browse files
krausestkrausest
committed
Merge branch 'mksunny1-Vanillajs-3'
2 parents ee2b2a0 + 3a3f14e commit 7b0c35b

File tree

6 files changed

+237
-28
lines changed

6 files changed

+237
-28
lines changed

‎frameworks/keyed/vanillajs-3/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<title>Benchmarks for Vanillajs-3</title>
55
<link href="/css/currentStyle.css" rel="stylesheet" />
6-
<script src='src/Main.js' type="module"></script>
76
</head>
87
<body>
98
<div id="main">
@@ -81,5 +80,6 @@ <h1>Vanillajs-3-"keyed"</h1>
8180
</div>
8281
</div>
8382
<template id="itemTemplate"><tr><td class='col-md-1'>{id}</td><td class='col-md-4'><a class='lbl'>{lbl}</a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td></tr></template>
83+
<script src='src/Main.js'></script>
8484
</body>
8585
</html>

‎frameworks/keyed/vanillajs-3/src/Main.js

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,39 @@
11
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
22
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
33
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
4-
const lengths = [adjectives.length, colours.length, nouns.length];
5-
function* _random(n) {
6-
for (let max of lengths) {
7-
const arr = new Array(n);
8-
for (i = 0; i < n; i++) arr[i] = Math.round(Math.random() * 1000) % max;
9-
yield arr
10-
}
11-
}
12-
const data = [], nTemplates = 10, tbody = document.getElementsByTagName('tbody')[0];
13-
let index = 1, i, lbl, selected;
4+
const [l1, l2, l3] = [adjectives.length, colours.length, nouns.length];
5+
6+
const nTemplates = (n) => Math.round(n / 100), tbody = document.getElementsByTagName('tbody')[0];
7+
let data = [], index = 1, i, lbl, selected;
148

15-
function create(n = 1000) { if (data.length) clear(); append(n); }
9+
function create(n = 1000) { if (tbody.children.length) clear(); append(n); }
1610
function append(n = 1000) {
17-
const [r1, r2, r3] = _random(n); let j = 0;
18-
const itemTemplate1 = document.getElementById('itemTemplate').content.firstElementChild;
19-
const itemTemplate = document.createDocumentFragment();
20-
for (i = 0; i < nTemplates; i++) itemTemplate.appendChild(itemTemplate1.cloneNode(true));
11+
const nt = nTemplates(n); let j = 0, r1, r2, r3;
12+
const itemTemplate = document.getElementById('itemTemplate').content;
13+
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
14+
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
15+
2116
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
2217
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
2318

24-
while ((n -= nTemplates) >= 0) {
25-
for (i = 0; i < nTemplates; i++, j++) {
26-
ids[i].nodeValue = index++;
27-
data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)
28-
}
19+
while ((n -= nt) >= 0) {
20+
for (i = 0; i < nt; i++, j++) {
21+
r1 = Math.round(Math.random() * 1000) % l1;
22+
r2 = Math.round(Math.random() * 1000) % l2;
23+
r3 = Math.round(Math.random() * 1000) % l3;
24+
(ids[i].nodeValue = index++) && data.push(labels[i].nodeValue = `${adjectives[r1]} ${colours[r2]} ${nouns[r3]}`)
25+
}
2926
tbody.appendChild(itemTemplate.cloneNode(true));
3027
}
3128
}
3229
function update() {
3330
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
34-
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
31+
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!'
3532
}
36-
function clear() { data.length = 0; tbody.textContent = '' }
33+
function clear() { (data = []) && (tbody.textContent = '') }
3734

3835
function swap() {
39-
if (data.length < 999) return; const first = tbody.firstElementChild;
36+
if (tbody.children.length < 999) return; const first = tbody.firstElementChild;
4037
[data[1], data[998]] = [data[998], data[1]];
4138
tbody.insertBefore(tbody.insertBefore(first.nextElementSibling,
4239
tbody.children[998]).nextElementSibling, first.nextElementSibling);
@@ -48,13 +45,14 @@ tbody.onclick = (e) => {
4845
if (element === selected) selected.className = selected.className ? "" : "danger";
4946
else {
5047
if (selected) selected.className = "";
51-
element.className = "danger"; selected = element
48+
(element.className = "danger") && (selected = element)
5249
}
5350
} else if (e.target.matches('span.remove')) {
54-
data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.target.parentNode.parentNode.parentNode)), 1);
51+
const element = e.target.parentNode.parentNode.parentNode;
52+
data.splice(Array.prototype.indexOf.call(tbody.children, element)) && tbody.removeChild(element);
5553
}
5654
}
5755
for (let [key, fn] of Object.entries({
58-
run: create, runlots: () => create(10000),
56+
run: create, runlots: () => create(10000),
5957
add: append, update, clear, swaprows: swap
60-
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(); fn() }
58+
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(), fn() }

‎frameworks/non-keyed/vanillajs-3/index.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Benchmarks for Vanillajs-3</title>
5+
<link href="/css/currentStyle.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div id="main">
9+
<div class="container">
10+
<div class="jumbotron">
11+
<div class="row">
12+
<div class="col-md-6">
13+
<h1>Vanillajs-3-"non-keyed"</h1>
14+
</div>
15+
<div class="col-md-6">
16+
<div class="row">
17+
<div class="col-sm-6 smallpad">
18+
<button
19+
type="button"
20+
class="btn btn-primary btn-block"
21+
id="run"
22+
>
23+
Create 1,000 rows
24+
</button>
25+
</div>
26+
<div class="col-sm-6 smallpad">
27+
<button
28+
type="button"
29+
class="btn btn-primary btn-block"
30+
id="runlots"
31+
>
32+
Create 10,000 rows
33+
</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button
37+
type="button"
38+
class="btn btn-primary btn-block"
39+
id="add"
40+
>
41+
Append 1,000 rows
42+
</button>
43+
</div>
44+
<div class="col-sm-6 smallpad">
45+
<button
46+
type="button"
47+
class="btn btn-primary btn-block"
48+
id="update"
49+
>
50+
Update every 10th row
51+
</button>
52+
</div>
53+
<div class="col-sm-6 smallpad">
54+
<button
55+
type="button"
56+
class="btn btn-primary btn-block"
57+
id="clear"
58+
>
59+
Clear
60+
</button>
61+
</div>
62+
<div class="col-sm-6 smallpad">
63+
<button
64+
type="button"
65+
class="btn btn-primary btn-block"
66+
id="swaprows"
67+
>
68+
Swap Rows
69+
</button>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
<table class="table table-hover table-striped test-data">
76+
<tbody id="tbody">
77+
</tbody>
78+
</table>
79+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
80+
</div>
81+
</div>
82+
<template id="itemTemplate"><tr><td class='col-md-1'>{id}</td><td class='col-md-4'><a class='lbl'>{lbl}</a></td><td class='col-md-1'><a class='remove'><span class='remove glyphicon glyphicon-remove' aria-hidden='true'></span></a></td><td class='col-md-6'></td></tr></template>
83+
<script src='src/Main.js'></script>
84+
</body>
85+
</html>

‎frameworks/non-keyed/vanillajs-3/package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/non-keyed/vanillajs-3/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "js-framework-benchmark-vanillajs-3",
3+
"version": "1.1.1",
4+
"description": "Vanilla.JS-3 demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "",
8+
"issues": [
9+
772
10+
]
11+
},
12+
"scripts": {
13+
"dev": "exit 0",
14+
"build-prod": "exit 0"
15+
},
16+
"keywords": [
17+
"vanilla",
18+
"javascript"
19+
],
20+
"author": "Mark Sune",
21+
"license": "Apache-2.0",
22+
"homepage": "https://github.com/krausest/js-framework-benchmark",
23+
"repository": {
24+
"type": "git",
25+
"url": "https://github.com/krausest/js-framework-benchmark.git"
26+
}
27+
}

‎frameworks/non-keyed/vanillajs-3/src/Main.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
2+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
3+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
4+
const lengths = [adjectives.length, colours.length, nouns.length];
5+
function* _random(n) {
6+
for (let max of lengths) {
7+
const arr = new Array(n);
8+
for (i = 0; i < n; i++) arr[i] = Math.round(Math.random() * 1000) % max;
9+
yield arr
10+
}
11+
}
12+
const data = [], nTemplates = (n) => Math.round(n / 100), tbody = document.getElementsByTagName('tbody')[0];
13+
let index = 1, i, lbl, selected;
14+
15+
function create(n = 1000) {
16+
if (data.length < n) { set(data.length); append(n - data.length) }
17+
else {
18+
set(data.length);
19+
if (data.length > n) {
20+
data.length = n;
21+
const rg = document.createRange();
22+
rg.setStartBefore(tbody.children[n]);
23+
rg.setEndAfter(tbody.lastElementChild);
24+
rg.deleteContents();
25+
}
26+
}
27+
}
28+
function set(n) {
29+
const indices = tbody.querySelectorAll('td:first-child');
30+
const labels = tbody.querySelectorAll('a.lbl');
31+
const [r1, r2, r3] = _random(n);
32+
for (i = 0; i < n; i++) {
33+
indices[i].firstChild.nodeValue = index++;
34+
labels[i].firstChild.nodeValue = data[i] = `${adjectives[r1[i]]} ${colours[r2[i]]} ${nouns[r3[i]]}`;
35+
}
36+
}
37+
function append(n = 1000) {
38+
const [r1, r2, r3] = _random(n), nt = nTemplates(n); let j = 0;
39+
const itemTemplate = document.getElementById('itemTemplate').content;
40+
while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
41+
while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
42+
43+
const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
44+
const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
45+
46+
while ((n -= nt) >= 0) {
47+
for (i = 0; i < nt; i++, j++) {
48+
ids[i].nodeValue = index++;
49+
data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)
50+
}
51+
tbody.appendChild(itemTemplate.cloneNode(true));
52+
}
53+
}
54+
function update() {
55+
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
56+
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
57+
}
58+
function clear() { data.length = 0; tbody.textContent = '' }
59+
60+
function swap() {
61+
if (data.length < 999) return;
62+
[data[1], data[998]] = [data[998], data[1]];
63+
const [id1, lbl1] = tbody.children[1].querySelectorAll('td:first-child, a.lbl');
64+
const [id998, lbl998] = tbody.children[998].querySelectorAll('td:first-child, a.lbl');
65+
[id1.firstChild.nodeValue, id998.firstChild.nodeValue] = [id998.firstChild.nodeValue, id1.firstChild.nodeValue ];
66+
[lbl1.firstChild.nodeValue, lbl998.firstChild.nodeValue] = [lbl998.firstChild.nodeValue, lbl1.firstChild.nodeValue ]
67+
}
68+
tbody.onclick = (e) => {
69+
e.preventDefault; e.stopPropagation;
70+
if (e.target.matches('a.lbl')) {
71+
const element = e.target.parentNode.parentNode;
72+
if (element === selected) selected.className = selected.className ? "" : "danger";
73+
else {
74+
if (selected) selected.className = "";
75+
element.className = "danger"; selected = element
76+
}
77+
} else if (e.target.matches('span.remove')) { let temp;
78+
const element = e.target.parentNode.parentNode.parentNode;
79+
data.splice(Array.prototype.indexOf.call(tbody.children, element), 1);
80+
tbody.removeChild(element);
81+
}
82+
}
83+
for (let [key, fn] of Object.entries({
84+
run: create, runlots: () => create(10000),
85+
add: append, update, clear, swaprows: swap
86+
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(), fn() }

0 commit comments

Comments
 (0)