10,000个按钮的hyperHTML

Question

我创建了一个测试页面，在该页面中，我使用hyperHTML来展示10,000个按钮。在堆栈溢出上发布的代码有点大，但是您可以在此页面这里上查看源代码以查看代码(单击后期望延迟)。

hyperHTML花了比预期更多的时间来完成它的工作，这让我觉得我在滥用它。

有建议的优化吗？

更新：，看起来我使用的是hyperHTML的旧版本。目前的版本在这次考试中表现得很快。

Answer 1

除了测试之外的更新不是一个真实的用例，还有改进线性空洞模板文字的空间，使现在的7秒缩短到大约70 ms .然而，其余的应用程序，这不是您如何使用hyperHTML。

我创建了一个测试页面，在该页面中，我使用hyperHTML来展示10,000个按钮

您根本没有正确地使用hyperHTML。它是一个声明性库，它希望您忘记document.createElement、addEventListener甚至setAttribute的用法。

在这个示例中，您似乎真的在努力避免它的所有实用程序，而且由于这不是关于hyperHTML的第一个问题，所以您似乎是有意地避免使用它的文档和示例。

在这种情况下，你想达到什么目的？

这段代码在堆栈溢出上的发布有点大。

那个密码完全是胡说八道，国际海事组织。没有一个精神正常的人会像你这样写10000个按钮，我敢打赌那是机器产生的。

在hyperHTML中创建10K按钮或其中一种方式的代码非常适合本论坛：

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}`;

就这样。您最终可以优化呈现这些内容的容器，并且为了保存原始演示，您还可以添加一些含义非常可疑的文本内容，但在这个非常具体的情况下，只需要一个craeteTextNode，这也不是真正需要的东西，但对于基准测试来说是唯一有意义的东西，所以结果是本代码笔中显示的结果和这里的执行时间是19.152ms，这意味着您可以在50 has显示10.000个按钮。

然而，在现实世界中，同时显示10.000个按钮几乎等于0，所以您应该更好地理解hyperHTML是什么，它解决了什么，以及如何从中受益，而不是将它用作innerHTML。

hyperHTML和innerHTML是100%不同的，你越早理解它，它就越好。

如果您需要innerHTML，不要使用hyperHTML。

如果您想要使用hyperHTML，请忘记任何不是声明性的DOM操作，除非是真正需要的，因为这里根本没有这种情况。