Question

我创建了一个测试页，在其中我使用hyperHTML展示了10,000个按钮。该代码有点大，可以发布到stackoverflow上，但是您可以在here页上查看源代码以查看代码（单击后预期延迟）。

hyperHTML完成工作所需的时间比预期的要多，这让我觉得我在滥用它。

有人建议优化吗？

更新：似乎我正在使用旧版的hyperHTML。当前版本正在快速测试。

Answer 1

更新除了测试不是真实的用例之外，线性穿孔模板文字还有很多改进的余地，因此现在7秒钟可以减少到大约70毫秒……但是，其余的适用，那不是您使用hyperHTML的方式。

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

您根本没有正确使用hyperHTML。这是一个声明式库，希望您忘记使用document.createElement或addEventListener甚至是setAttribute。

在此示例中，您似乎确实在努力避免使用其所有实用程序，并且由于这不是有关hyperHTML的第一个问题，因此您似乎在避免使用其documentation和examples目的。

在这种情况下，您要达到什么目的？

代码有点大，可以发布到stackoverflow

该代码绝对是胡扯，IMO。没有一个理智的人会像您在那里那样内联地编写10000个按钮，我敢打赌这确实是机器生成的。

在hyperHTML中创建1万个按钮或其中一种方法的代码非常适合本论坛：

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，再次不是真正需要的，但对基准测试有意义的唯一事情是the result is the one shown in this Code Pen，此处的执行时间为19.152ms，这意味着您可以以50FPS的速度显示10.000个按钮。

但是，一次显示10.000个按钮在现实世界中几乎有0个用例，因此您应该宁愿了解什么是hyperHTML，它可以解决什么以及如何从中受益，而不是将其用作{ {1}}。

hyperHTML与innerHTML有100％的差异，您越早了解它，就越好。

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

如果要使用hyperHTML，请不要使用任何非声明性的DOM操作，除非确实需要，否则根本不是这种情况。

10,000个按钮的hyperHTML

1 个答案: