Skip to content

Commit

Permalink
perf: add vanilla benchmarks
Browse files Browse the repository at this point in the history
  • Loading branch information
@aidenybai
aidenybai committed Sep 6, 2021
1 parent 7b07de3 commit bc7c8d6
Show file tree
Hide file tree
Showing 10 changed files with 257 additions and 49 deletions.
24 changes: 21 additions & 3 deletions benchmarks/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,34 @@ const suites = [

const el = createElement(
m('div', undefined, [
'Check console for results - Compliant with ',
'Open console to check for results. This benchmark is compliant with ',
m('a', { href: 'https://github.com/krausest/js-framework-benchmark', target: '_blank' }, [
'JS Framework Benchmark',
]),
m('br'),
m('br'),
...suites.map((suite) =>
m('button', { onclick: () => new Benchmark([suite]).run() }, [suite.name]),
m(
'button',
{
onclick: () => {
console.log(`Running: ${suite.name}`);
new Benchmark([suite]).run();
},
},
[suite.name],
),
),
m(
'button',
{
onclick: () => {
console.log(`Running: ${suites.map((suite) => suite.name).join(', ')}`);
new Benchmark(suites).run();
},
},
['All'],
),
m('button', { onclick: () => new Benchmark(suites).run() }, ['All']),
]),
);

Expand Down
40 changes: 34 additions & 6 deletions benchmarks/suites/appendManyRowsToLargeTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,36 @@ import { Suite } from 'yet-another-benchmarking-tool';
import { m, createElement, patch, VFlags } from '../../src/index';
import { buildData } from '../data';

const el = document.createElement('table');
const data = buildData(10000);
data.forEach(({ id, label }) => {
const el1 = document.createElement('table');
const data1 = buildData(10000);
data1.forEach(({ id, label }) => {
const newId = String(id);
const row = createElement(
m('tr', { key: newId }, [m('td', undefined, [newId]), m('td', undefined, [label])]),
);
el.appendChild(row);
el1.appendChild(row);
});
data1.push(...buildData(1000));

const el2 = document.createElement('table');
const data2 = buildData(10000);
data2.forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el2.appendChild(tr);
});
data.push(...buildData(1000));

const suite = new Suite('append many rows to large table', [
[
'million',
() => {
patch(
el,
el1,
m(
'table',
undefined,
Expand All @@ -35,6 +48,21 @@ const suite = new Suite('append many rows to large table', [
);
},
],
[
'vanilla',
() => {
buildData(1000).forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el2.appendChild(tr);
});
},
],
]);

export default suite;
26 changes: 21 additions & 5 deletions benchmarks/suites/clearRows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,37 @@ import { Suite } from 'yet-another-benchmarking-tool';
import { m, createElement, patch, VFlags } from '../../src/index';
import { buildData } from '../data';

const el = document.createElement('table');
const data = buildData(10000);
data.forEach(({ id, label }) => {
const el1 = document.createElement('table');
const data1 = buildData(10000);
data1.forEach(({ id, label }) => {
const newId = String(id);
const row = createElement(
m('tr', { key: newId }, [m('td', undefined, [newId]), m('td', undefined, [label])]),
);
el.appendChild(row);
el1.appendChild(row);
});

const el2 = document.createElement('table');
const data2 = buildData(10000);
data2.forEach(({ id, label }) => {
const newId = String(id);
const row = createElement(
m('tr', { key: newId }, [m('td', undefined, [newId]), m('td', undefined, [label])]),
);
el2.appendChild(row);
});

const suite = new Suite('clear rows', [
[
'million',
() => {
patch(el, m('table', undefined, [], VFlags.NO_CHILDREN));
patch(el1, m('table', undefined, [], VFlags.NO_CHILDREN));
},
],
[
'vanilla',
() => {
el2.childNodes.forEach((node) => el2.removeChild(node));
},
],
]);
Expand Down
16 changes: 16 additions & 0 deletions benchmarks/suites/createManyRows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,22 @@ const suite = new Suite('create many rows', [
);
},
],
[
'vanilla',
() => {
const el = document.createElement('table');
buildData(10000).forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el.appendChild(tr);
});
},
],
]);

export default suite;
16 changes: 16 additions & 0 deletions benchmarks/suites/createRows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,22 @@ const suite = new Suite('create rows', [
);
},
],
[
'vanilla',
() => {
const el = document.createElement('table');
buildData(1000).forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el.appendChild(tr);
});
},
],
]);

export default suite;
43 changes: 36 additions & 7 deletions benchmarks/suites/partialUpdate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,43 @@ import { Suite } from 'yet-another-benchmarking-tool';
import { m, createElement, patch, UPDATE, VFlags } from '../../src/index';
import { buildData } from '../data';

const el = document.createElement('table');
const data = buildData(1000);
const el1 = document.createElement('table');
const data1 = buildData(1000);
const deltas = [];
data.forEach(({ id, label }) => {
data1.forEach(({ id, label }) => {
const row = createElement(
m('tr', undefined, [m('td', undefined, [String(id)]), m('td', undefined, [label])]),
);
el.appendChild(row);
el1.appendChild(row);
});
for (let i = 0; i < 1000; i += 10) {
deltas.push(UPDATE(0));
data[i] = buildData(1)[0];
data1[i] = buildData(1)[0];
}

const el2 = document.createElement('table');
const data2 = buildData(1000);
data2.forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el2.appendChild(tr);
});

const suite = new Suite('partial update', [
[
'million',
() => {
patch(
el,
el1,
m(
'table',
undefined,
data.map(({ id, label }) =>
data1.map(({ id, label }) =>
m('tr', undefined, [m('td', undefined, [String(id)]), m('td', undefined, [label])]),
),
VFlags.ANY_CHILDREN,
Expand All @@ -39,6 +52,22 @@ const suite = new Suite('partial update', [
);
},
],
[
'vanilla',
() => {
for (let i = 0; i < 1000; i += 10) {
const { id, label } = buildData(1)[0];
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el2.replaceWith(tr);
}
},
],
]);

export default suite;
31 changes: 25 additions & 6 deletions benchmarks/suites/removeRow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,39 @@ import { Suite } from 'yet-another-benchmarking-tool';
import { m, createElement, patch, VFlags, DELETE } from '../../src/index';
import { buildData } from '../data';

const el = document.createElement('table');
const data = buildData(1000);
data.forEach(({ id, label }) => {
const el1 = document.createElement('table');
const data1 = buildData(1000);
data1.forEach(({ id, label }) => {
const row = createElement(
m('tr', undefined, [m('td', undefined, [String(id)]), m('td', undefined, [label])]),
);
el.appendChild(row);
el1.appendChild(row);
});
const row = 0;

const el2 = document.createElement('table');
const data2 = buildData(1000);
data2.forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el2.appendChild(tr);
});

const suite = new Suite('remove row', [
[
'million',
() => {
patch(
el,
el1,
m(
'table',
undefined,
data.map(({ id, label }) => {
data1.map(({ id, label }) => {
const newId = String(id);
return m('tr', { key: newId }, [
m('td', undefined, [newId]),
Expand All @@ -39,6 +52,12 @@ const suite = new Suite('remove row', [
);
},
],
[
'vanilla',
() => {
el2.removeChild(el2.childNodes[row]);
},
],
]);

export default suite;
39 changes: 32 additions & 7 deletions benchmarks/suites/replaceAllRows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,43 @@ const shuffleArray = <T>(array: T[]): void => {
}
};

const el = document.createElement('table');
const data = buildData(1000);
data.forEach(({ id, label }) => {
const el1 = document.createElement('table');
const data1 = buildData(1000);
data1.forEach(({ id, label }) => {
const newId = String(id);
const row = createElement(
m('tr', { key: newId }, [m('td', undefined, [newId]), m('td', undefined, [label])]),
);
el.appendChild(row);
el1.appendChild(row);
});

shuffleArray(data);
shuffleArray(data1);

const el2 = document.createElement('table');
const data2 = buildData(1000);
data2.forEach(({ id, label }) => {
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const td2 = document.createElement('td');
td1.textContent = String(id);
td2.textContent = label;
tr.appendChild(td1);
tr.appendChild(td2);
el2.appendChild(tr);
});

shuffleArray(data2);

const suite = new Suite('replace all rows', [
[
'million',
() => {
patch(
el,
el1,
m(
'table',
undefined,
data.map(({ id, label }) => {
data1.map(({ id, label }) => {
const newId = String(id);
return m('tr', { key: newId }, [
m('td', undefined, [newId]),
Expand All @@ -47,6 +62,16 @@ const suite = new Suite('replace all rows', [
);
},
],
[
'vanilla',
() => {
el2.childNodes.forEach((tr, i) => {
const newId = String(data2[i].id);
tr.childNodes[0].textContent = newId;
tr.childNodes[1].textContent = data2[i].label;
});
},
],
]);

export default suite;
Loading

0 comments on commit bc7c8d6

Please sign in to comment.