0

I created a test page where I'm using hyperHTML to showcase 10,000 buttons. The code is a little large to post onto stackoverflow, but you can view source on this page here to see the code (expect delay after clicking).

hyperHTML is taking more time than expected to complete its work, which makes me think I'm misusing it.

Any suggested optimizations?

Update: It seems I was using an older version of hyperHTML. The current version is blazing fast on this test.

4

1 回答 1

3

Update beside the test being not a real world use case, there was room for improvements on linearly holed template literals so that 7 seconds now are down to roughly 70 ms ... however, the rest applies, that is not how you use hyperHTML.

I created a test page where I'm using hyperHTML to showcase 10,000 buttons

You are not using hyperHTML properly at all. It's a declarative library that wants you to forget the usage of document.createElement or addEventListener or even setAttribute.

It looks like you are really trying hard to avoid all its utility with this example, and since this is not your first question about hyperHTML, it looks like you are avoiding its documentation and examples on purpose.

In such case, what are you trying to achieve?

The code is a little large to post onto stackoverflow

That code is an absolute nonsense, IMO. No sane person would ever write 10000 buttons inline like you did there, and I bet that was machine generated indeed.

The code to create 10K buttons, or one of the ways, in hyperHTML, fits very easily in this forum:

function createButton(content) {
  return wire(document, ':' + content)`
  <button onclick=${onclick}>${content}</button>`;
}

function onclick(e) {
  alert(`You clicked a button labeled: ${e.target.textContent}.`);
}

const buttons = [];
for (let i = 0; i < 10000; i++)
  buttons.push(createButton('btn-' + i));

bind(document.body)`${buttons}`;

That's it. You can eventually optimize the container that will render such content, and to preserve your original demo, you can also add some text content which has very doubtful meaning but, in this very specific case, would need just a craeteTextNode, something again not really needed but the only thing that makes sense for a benchmark, so that the result is the one shown in this Code Pen, and the execution time here is 19.152ms, meaning you can show 10.000 buttons at 50FPS.

However, showing 10.000 buttons all at once has close to 0 use cases in the real-world, so you should rather understand what is hyperHTML, what it solves, and how to benefit from it, instead of using it as an innerHTML.

hyperHTML is 100% different from innerHTML, the sooner you understand this, the better it is.

If you need innerHTML, don't use hyperHTML.

If you want to use hyperHTML, forget any DOM operation that is not declarative, unless really needed, where this wasn't the case at all.

于 2018-12-15T01:11:25.847 回答