用于 10,000 个按钮的 hyperHTML

Question

我创建了一个测试页面，我在其中使用 hyperHTML 来展示 10,000 个按钮。代码有点大 post 到 Whosebug，但是你可以在这个页面上查看源代码 here 来查看代码（预计点击后会有延迟）。

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

有什么优化建议吗？

更新： 看来我使用的是旧版本的 hyperHTML。当前版本在此测试中速度非常快。

Answer 1

Update 除了测试不是真实世界的用例之外，线性孔模板文字还有改进的空间，现在 7 秒减少到大约 70 毫秒 .. . 然而，其余的适用，这不是您使用 hyperHTML 的方式。

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

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

的用法

看起来您确实在努力避免使用此示例的所有实用程序，并且由于这不是您关于 hyperHTML 的第一个问题，因此看起来您是在故意避免使用它 documentation and examples。

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

The code is a little large to post onto Whosebug

IMO，该代码绝对是胡说八道。任何理智的人都不会像您在那里那样内联编写 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，一些东西再次不是真的需要，但唯一对基准有意义的东西，所以 the result is the one shown in this Code Pen，这里的执行时间是 19.152ms，这意味着你可以以 50FPS 显示 10.000 个按钮。

但是，同时显示 10.000 个按钮在现实世界中几乎没有用例，因此您应该了解什么是 hyperHTML、它解决的问题以及如何从中受益，而不是将其用作一个 innerHTML.

hyperHTML 与 innerHTML 100% 不同，越早理解越好。

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

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

用于 10,000 个按钮的 hyperHTML

hyperHTML for 10,000 Buttons

hyperhtml