Skip to content

Commit a9687f2

Browse files
author
Henrik jJaven
committed
Merge branch 'nextbench' of https://github.com/hman61/js-framework-benchmark into nextbench
2 parents 8575713 + eb71cbc commit a9687f2

File tree

7 files changed

+300
-0
lines changed

7 files changed

+300
-0
lines changed

‎frameworks/non-keyed/doohtml/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DooHTML</title>
6+
<link href="/css/currentStyle.css" rel="preload" as="style"/>
7+
<link href="/css/currentStyle.css" rel="stylesheet"/>
8+
<link href="./js/doo.html.min.js" rel="preload" as="script"/>
9+
10+
<script src="./js/doo.html.min.js"></script>
11+
<!-- <script type="module" src="http://localhost:8001/src/js/doo.html.js"></script> -->
12+
13+
<script type="module" src="./js/Main.class.js" defer ></script>
14+
</head>
15+
<body>
16+
<div id="main">
17+
<div class="container">
18+
<div class="jumbotron">
19+
<div class="row">
20+
<div class="col-md-6">
21+
<h1>DooHTML - non-keyed</h1><span class="ver"></span>
22+
</div>
23+
<div class="col-md-6">
24+
<div class="row">
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
39+
</div>
40+
<div class="col-sm-6 smallpad">
41+
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<doo-main
48+
context="shadow"
49+
link="/css/currentStyle.css"
50+
bind="rows"
51+
template="./templates/main.html"
52+
></doo-main>
53+
</div>
54+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
55+
</div>
56+
</body>
57+
</html>

‎frameworks/non-keyed/doohtml/js/Main.class.js

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
'use strict';
2+
3+
const _random = max => Math.random() * max | 0;
4+
5+
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"];
6+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
7+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
8+
9+
const lenA = adjectives.length, lenB = colours.length, lenC = nouns.length
10+
11+
import Timer from './doo.timer.js'
12+
13+
Doo.define(
14+
class Main extends Doo {
15+
constructor() {
16+
super(100)
17+
this.scrollTarget = '.table'
18+
this.defaultDataSet = 'rows'
19+
this.ID = 1
20+
this.data = {
21+
[this.defaultDataSet]: []
22+
}
23+
this.add = this.add.bind(this)
24+
this.run = this.run.bind(this)
25+
this.runLots = this.runLots.bind(this)
26+
this.update = this.update.bind(this)
27+
this.clear = this.clear.bind(this)
28+
this.swaprows = this.swapRows.bind(this)
29+
this.addEventListeners()
30+
this.selectedRow = undefined
31+
document.querySelector(".ver").innerHTML += ` ${Doo.version} (non-keyed)`
32+
document.title += ` ${Doo.version} (non-keyed)`
33+
}
34+
35+
async dooAfterRender() {
36+
this.tbody = this.shadow.querySelector('#tbody')
37+
this.shadow.querySelector(this.scrollTarget).addEventListener('click', e => {
38+
e.preventDefault();
39+
if (e.target.parentElement.matches('.remove')) {
40+
this.delete(e.target.parentElement);
41+
} else if (e.target.tagName === 'A') {
42+
this.select(e.target);
43+
}
44+
});
45+
}
46+
47+
getParentRow(elem) {
48+
while (elem) {
49+
if (elem.tagName === "TR") {return elem}
50+
elem = elem.parentNode;
51+
}
52+
return undefined;
53+
}
54+
55+
buildData(count = 1000) {
56+
const data = [];
57+
for (let i = 0; i < count; i++) {
58+
data.push({id: this.ID++,label: adjectives[_random(lenA)] + " " + colours[_random(lenB)] + " " + nouns[_random(lenC)]})
59+
}
60+
return data
61+
}
62+
63+
delete(elem) {
64+
let row = this.getParentRow(elem)
65+
if (row) {
66+
this.tbody.removeChild(row)
67+
this.data.rows[row.getAttribute('key')] = undefined
68+
}
69+
}
70+
71+
run() {
72+
this.data.rows = this.buildData()
73+
if (this.tbody.childNodes.length > this.data.rows.length) {
74+
this.tbody.textContent = ''
75+
}
76+
this.renderTable()
77+
}
78+
79+
run(e) {
80+
Timer.start('tot')
81+
this.data.rows = this.buildData()
82+
if (this.tbody.childNodes.length > this.data.rows.length) {
83+
this.tbody.textContent = ''
84+
}
85+
this.renderTable()
86+
// e.target.blur()
87+
Timer.stop('tot')
88+
}
89+
90+
add(e) {
91+
Timer.start('tot')
92+
let startRow = this.data.rows.length
93+
this.data.rows = this.data.rows.concat(this.buildData())
94+
this.renderTable(this.data.rows, startRow)
95+
Timer.stop('tot')
96+
97+
}
98+
99+
runLots(e) {
100+
this.data.rows = this.buildData(10000)
101+
if (this.tbody.childNodes.length > this.data.rows.length) {
102+
this.tbody.textContent = ''
103+
}
104+
this.renderTable()
105+
}
106+
107+
runLots(e) {
108+
Timer.start('tot')
109+
this.data.rows = this.buildData(10000)
110+
if (this.tbody.childNodes.length > this.data.rows.length) {
111+
this.tbody.textContent = ''
112+
}
113+
this.renderTable()
114+
// e.target.blur()
115+
Timer.stop('tot')
116+
}
117+
118+
update(e) {
119+
for (let i=0, len = this.data.rows.length;i<len;i+=10) {
120+
this.tbody.childNodes[i].childNodes[1].childNodes[0].innerText = this.data.rows[i].label += ' !!!'
121+
}
122+
}
123+
124+
select(elem) {
125+
if (this.selectedRow) {
126+
this.selectedRow.classList.remove('danger')
127+
this.selectedRow = undefined
128+
}
129+
let row = this.getParentRow(elem)
130+
if (row) {
131+
row.classList.toggle('danger')
132+
this.selectedRow = row
133+
}
134+
}
135+
136+
clear() {
137+
this.data.rows = []
138+
this.tbody.textContent = ''
139+
}
140+
141+
swapRows() {
142+
if (this.data.rows.length>10) {
143+
let node1 = this.tbody.childNodes[1]
144+
let node2 = this.tbody.childNodes[998]
145+
146+
let row1 = this.data.rows[1];
147+
this.data.rows[1] = this.data.rows[998];
148+
this.data.rows[998] = row1
149+
150+
this.tbody.insertBefore(node2, node1)
151+
this.tbody.insertBefore(node1, this.tbody.childNodes[999])
152+
153+
}
154+
}
155+
156+
addEventListeners() {
157+
document.getElementById("main").addEventListener('click', e => {
158+
e.preventDefault();
159+
if (e.target.matches('#runlots')) {
160+
this.runLots(e);
161+
} else if (e.target.matches('#run')) {
162+
this.run(e);
163+
} else if (e.target.matches('#add')) {
164+
this.add(e);
165+
} else if (e.target.matches('#update')) {
166+
this.update(e);
167+
} else if (e.target.matches('#clear')) {
168+
this.clear();
169+
} else if (e.target.matches('#swaprows')) {
170+
this.swapRows(e);
171+
}
172+
})
173+
}
174+
}
175+
)

‎frameworks/non-keyed/doohtml/js/doo.html.min.js

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

‎frameworks/non-keyed/doohtml/js/doo.timer.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default class Timer {
2+
static time = new Object()
3+
4+
5+
static start(name) {
6+
7+
if (!Timer.time[name]) {
8+
Timer.time[name] = [ new Date().getTime()]
9+
}
10+
};
11+
static stop(name) {
12+
if (Timer.time[name]) {
13+
Timer.time[name].push(new Date().getTime())
14+
// console.log(name, ': ', Timer.time[name][1] - Timer.time[name][0]);
15+
if (name==='tot') document.title = (Timer.time[name][1] - Timer.time[name][0]) + '|' + document.title
16+
Timer.time[name] = undefined
17+
}
18+
};
19+
}

‎frameworks/non-keyed/doohtml/package-lock.json

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

‎frameworks/non-keyed/doohtml/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "js-framework-benchmark-doohtml",
3+
"version": "0.60.1",
4+
"description": "DooHTML JS-Benchmark",
5+
"main": "Main.class.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "",
8+
"useShadowRoot": true,
9+
"shadowRootName": "doo-main",
10+
"buttonsInShadowRoot": false,
11+
"issues": [772]
12+
},
13+
"scripts": {
14+
"build-dev": "exit 0",
15+
"build-prod": "exit 0"
16+
},
17+
"keywords": [],
18+
"author": "Henrik Javen",
19+
"license": "Apache-2.0",
20+
"homepage": "https://doohtml.com",
21+
"repository": {
22+
"type": "git",
23+
"url": "https://github.com/hman61/js-framework-benchmark"
24+
}
25+
}
26+

‎frameworks/non-keyed/doohtml/templates/main.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<template>
3+
<table class="table table-hover table-striped test-data">
4+
<link href="${link}" rel="stylesheet">
5+
<tbody id="tbody"><tr bind="rows"><td class="col-md-1">{{id}}</td><td class="col-md-4"><a>{{label}}</a></td><td class="col-md-1"><a class="remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr></tbody>
6+
</table>
7+
</template>

0 commit comments

Comments
 (0)