Skip to content

Commit b681c51

Browse files
mksunny1mksunny1
committed
VanillaJS-3 implementation with notable advantages
I still took up the challenge to attempt a faster VanillaJS implementation for creating 1K rows. I could not find any consistent way to improve performance here. However, I found improvements in other areas. This is the result of my efforts.
1 parent 9fcbe01 commit b681c51

File tree

5 files changed

+187
-8
lines changed

5 files changed

+187
-8
lines changed

‎frameworks/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+
<script src='src/Main.js' type="module"></script>
7+
</head>
8+
<body>
9+
<div id="main">
10+
<div class="container">
11+
<div class="jumbotron">
12+
<div class="row">
13+
<div class="col-md-6">
14+
<h1>Vanillajs-3-"keyed"</h1>
15+
</div>
16+
<div class="col-md-6">
17+
<div class="row">
18+
<div class="col-sm-6 smallpad">
19+
<button
20+
type="button"
21+
class="btn btn-primary btn-block"
22+
id="run"
23+
>
24+
Create 1,000 rows
25+
</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button
29+
type="button"
30+
class="btn btn-primary btn-block"
31+
id="runlots"
32+
>
33+
Create 10,000 rows
34+
</button>
35+
</div>
36+
<div class="col-sm-6 smallpad">
37+
<button
38+
type="button"
39+
class="btn btn-primary btn-block"
40+
id="add"
41+
>
42+
Append 1,000 rows
43+
</button>
44+
</div>
45+
<div class="col-sm-6 smallpad">
46+
<button
47+
type="button"
48+
class="btn btn-primary btn-block"
49+
id="update"
50+
>
51+
Update every 10th row
52+
</button>
53+
</div>
54+
<div class="col-sm-6 smallpad">
55+
<button
56+
type="button"
57+
class="btn btn-primary btn-block"
58+
id="clear"
59+
>
60+
Clear
61+
</button>
62+
</div>
63+
<div class="col-sm-6 smallpad">
64+
<button
65+
type="button"
66+
class="btn btn-primary btn-block"
67+
id="swaprows"
68+
>
69+
Swap Rows
70+
</button>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
<table class="table table-hover table-striped test-data">
77+
<tbody id="tbody">
78+
</tbody>
79+
</table>
80+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
81+
</div>
82+
</div>
83+
<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>
84+
</body>
85+
</html>

‎frameworks/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/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 Sun",
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/keyed/vanillajs-3/src/Main.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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 = [], tbody = document.getElementsByTagName('tbody')[0];
13+
let index = 1, i, lbl, selected, temp;
14+
15+
function create(e, n = 1000) { if (data.length) clear(e); append(e, n); }
16+
function append(e, n = 1000) {
17+
const [r1, r2, r3] = _random(n);
18+
const itemTemplate = document.getElementById('itemTemplate').content.firstElementChild;
19+
const itemId = itemTemplate.firstElementChild.firstChild, itemLabel = itemTemplate.querySelector('a.lbl').firstChild;
20+
while (--n >= 0) {
21+
itemId.nodeValue = index++;
22+
data.push(itemLabel.nodeValue = `${adjectives[r1[n]]} ${colours[r2[n]]} ${nouns[r3[n]]}`)
23+
tbody.appendChild(itemTemplate.cloneNode(true));
24+
}
25+
}
26+
function update(e) {
27+
const labels = tbody.querySelectorAll('a.lbl'), length = labels.length;
28+
for (i = 0; i < length; i += 10) labels[i].firstChild.nodeValue = data[i] += ' !!!';
29+
}
30+
function clear(e) { data.length = 0; tbody.textContent = '' }
31+
32+
function swap(e) {
33+
if (data.length < 999) return;
34+
[data[1], data[998]] = [data[998], data[1]];
35+
tbody.replaceChild(tbody.children[1], (temp = tbody.children[998]));
36+
tbody.insertBefore(temp, tbody.children[1]);
37+
}
38+
tbody.onclick = (e) => {
39+
e.preventDefault; e.stopPropagation;
40+
if (e.target.matches('a.lbl')) {
41+
const element = e.composedPath()[2];
42+
if (element === selected) selected.className = selected.className ? "" : "danger";
43+
else {
44+
if (selected) selected.className = "";
45+
element.className = "danger"; selected = element
46+
}
47+
} else if (e.target.matches('span.remove')) {
48+
data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.composedPath()[3])), 1);
49+
}
50+
}
51+
for (let [key, fn] of Object.entries({
52+
run: create, runlots: (e) => create(e, 10000),
53+
add: append, update, clear, swaprows: swap
54+
})) document.getElementById(key).onclick = (e) => { e.stopPropagation(); fn(e) }

‎package-lock.json

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

0 commit comments

Comments
 (0)