1 files changed, 112 insertions, 0 deletions
diff --git a/preact/benches/src/many_updates.html b/preact/benches/src/many_updates.html
new file mode 100644
index 0000000..e59b304
--- /dev/null
+++ b/preact/benches/src/many_updates.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Patching HTML</title>
+		<style>
+			.hello {
+				color: red;
+			}
+
+			.bye {
+				color: blue;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module">
+			import { measureName, measureMemory } from './util.js';
+			import { createRoot, createElement as h } from 'framework';
+
+			const state = {
+				msg: 'hello',
+				list: new Array(1000).fill(0).map((_, i) => ({
+					i,
+					text: 'foobar' + i
+				}))
+			};
+
+			let counter = 0;
+			function App() {
+				return h(
+					'div',
+					{ id: 'app' },
+					h('p', null, '> ', ++counter, ' <'),
+					h('p', null, state.msg),
+					...state.list.map((obj, i) =>
+						h(
+							'div',
+							{ key: i, title: state.msg + i },
+							h('span', { className: state.msg }, obj.text),
+							h('span', { className: 'baz' }, 'one'),
+							h('span', { className: 'qux' }, 'two'),
+							h(
+								'div',
+								null,
+								h('span', { className: 'qux' }, 'three'),
+								h('span', { className: 'qux' }, 'four'),
+								h('span', { className: 'baz' }, 'five'),
+								h(
+									'div',
+									null,
+									h('span', { className: 'qux' }, 'six'),
+									h('span', { className: 'baz' }, 'seven'),
+									h('span', { className: state.msg }, 'eight')
+								)
+							)
+						)
+					)
+				);
+			}
+
+			const root = createRoot(document.getElementById('root'));
+
+			// const p = performance.now();
+			root.render(h(App));
+			// console.log(`mount: ${(performance.now() - p).toFixed(2)}ms`);
+
+			// const patchResults = [];
+
+			function runPatch() {
+				// const s = performance.now();
+				state.msg = state.msg === 'hello' ? 'bye' : 'hello';
+				state.list[0].text = state.msg;
+				root.render(h(App));
+				// patchResults.push(performance.now() - s);
+			}
+
+			async function warmup() {
+				// const count = 100;
+				const count = 25;
+
+				for (let i = 0; i < count; i++) {
+					runPatch();
+					await new Promise(r => requestAnimationFrame(r));
+				}
+
+				// let fastest = Infinity;
+				// const total = patchResults.reduce((all, cur) => {
+				// 	if (cur < fastest) {
+				// 		fastest = cur;
+				// 	}
+				// 	return all + cur;
+				// }, 0);
+
+				// console.log(`${count} runs average: ${(total / count).toFixed(2)}ms`);
+				// console.log(`fastest run: ${fastest.toFixed(2)}ms`);
+			}
+
+			warmup().then(async () => {
+				performance.mark('start');
+				runPatch();
+				await new Promise(r => requestAnimationFrame(r));
+				performance.mark('stop');
+				performance.measure(measureName, 'start', 'stop');
+
+				measureMemory();
+			});
+		</script>
+	</body>
+</html>