Created
June 6, 2020 21:52
-
-
Save zaceno/6e64276a0c0f29b31d860c5570c7177d to your computer and use it in GitHub Desktop.
helper to benchmark old & new hyperlit vs plain h
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="module"> | |
| /* | |
| Plain h - 33.4 fps | |
| [email protected] - 30.0 fps (10% slower) – 825 bytes | |
| [email protected] - 28.5 fps (15% slower) – 674 bytes | |
| */ | |
| import {h, app} from 'https://unpkg.com/hyperapp' | |
| import html from 'https://unpkg.com/[email protected]?module' | |
| import ohm from 'https://unpkg.com/[email protected]?module' | |
| //Views with plain h | |
| const hitem = ({color}, word) => h('li', {class: color}, [word]) | |
| const hlist = ({words, colors}) => h('ul', {}, words.map((w, i) => hitem({color: colors[i]}, [w]))) | |
| const hview = state => h('body', {}, | |
| [...Array(500)].map(_ => | |
| hlist({ | |
| words: state.words, | |
| colors:state.colors | |
| }) | |
| ) | |
| ) | |
| //Views with [email protected] | |
| const litem = ({color}, word) => html` | |
| <li class=${color}> | |
| ${word} | |
| </li>` | |
| const llist = ({words, colors}) => html` | |
| <ul> | |
| ${words.map((w,i) => | |
| html`<${litem} color=${colors[i]}>${w}<//>` | |
| )} | |
| </ul>` | |
| const lview = state => html` | |
| <body> | |
| ${[...Array(500)].map(_ => html` | |
| <${llist} | |
| words=${state.words} | |
| colors=${state.colors} | |
| />` | |
| )} | |
| </body>` | |
| //Views with [email protected] | |
| const oitem = ({color}, word) => ohm` | |
| <li class=${color}> | |
| ${word} | |
| </li>` | |
| const olist = ({words, colors}) => ohm` | |
| <ul> | |
| ${words.map((w,i) => | |
| ohm`<${oitem} color=${colors[i]}>${w}<//>` | |
| )} | |
| </ul>` | |
| const oview = state => ohm` | |
| <body> | |
| ${[...Array(500)].map(_ => ohm` | |
| <${olist} | |
| words=${state.words} | |
| colors=${state.colors} | |
| />` | |
| )} | |
| </body>` | |
| const addWord = (state, word) => ({...state, words: [...state.words.slice(1), word]}) | |
| const addColor = (state, color) => ({...state, colors: [...state.colors.slice(1), color]}) | |
| const ALL_WORDS = ['tooth', 'carrot', 'rhubarb', 'coal', 'dog', 'airplane', 'fish', 'bread', 'salt', 'farmer', 'watch'] | |
| const ALL_COLORS = ['orange', 'yellow', 'red', 'green', 'blue'] | |
| let wordIndex = -1, colorIndex = -1, dispatch | |
| app({ | |
| init: { | |
| words: ['fish', 'bread', 'salt'], | |
| colors: ['red', 'green', 'blue'], | |
| }, | |
| view: oview, // <--- SWAP THIS TO TEST DIFFERENT VNODE GENERATOR | |
| node: document.body, | |
| middleware: d => (dispatch = d) | |
| }) | |
| const update = () => requestAnimationFrame(() => { | |
| wordIndex = (wordIndex + 1) % ALL_WORDS.length | |
| colorIndex = (colorIndex + 1) % ALL_COLORS.length | |
| dispatch(addWord, ALL_WORDS[wordIndex]) | |
| dispatch(addColor,ALL_COLORS[colorIndex]) | |
| update() | |
| }) | |
| update() | |
| </script> | |
| </head> | |
| <body></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment