Skip to content

Instantly share code, notes, and snippets.

@DarkWiiPlayer
Last active May 30, 2023 08:59
Show Gist options
  • Save DarkWiiPlayer/13ba78201dc2a487e4deb6612e6bd9a1 to your computer and use it in GitHub Desktop.
Save DarkWiiPlayer/13ba78201dc2a487e4deb6612e6bd9a1 to your computer and use it in GitHub Desktop.
A simple benchmark to compare full re-render of a large table vs. updating individual text contents vs. updating them selectively.
<!doctype html>
<!-- Set type to one of "full", "all" or "selective" -->
<fun-matrix type="selective">
</fun-matrix>
<script type="module">
import {html} from "https://darkwiiplayer.github.io/js/skooma.js"
import element from "https://darkwiiplayer.github.io/js/element.js"
element(class FunMatrix extends HTMLElement {
constructor() {
super()
this.items = Array(100).fill(100).map(width => Array(width).fill(0))
this.addEventListener("click", event => this.update())
this.render()
}
render() {
this.replaceChildren(
html.table(
this.items.map(row => html.tr(
row.map(item => html.td(item))
))
)
)
}
connectedCallback() {
window.setInterval(() => {
this.mutate()
this.update(this.getAttribute("type"))
}, 1e2)
}
mutate() {
const row = this.items[Math.floor(Math.random() * this.items.length)]
row[Math.floor(Math.random() * row.length)] = Math.floor(Math.random() * 10)
}
update(type="full") { this[`update_${type}`]() }
update_full() { this.render() }
update_all() {
this.querySelectorAll("tr").forEach((row, y) => {
row.querySelectorAll("td").forEach((items, x) => {
items.innerText = this.items[y][x]
})
})
}
update_selective() {
this.querySelectorAll("tr").forEach((row, y) => {
row.querySelectorAll("td").forEach((cell, x) => {
const value = this.items[y][x]
if (cell.innerText != String(value))
cell.innerText = value
})
})
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment