diff options
Diffstat (limited to 'preact/benches/src/many_updates.html')
-rw-r--r-- | preact/benches/src/many_updates.html | 112 |
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> |