代码之家 › 专栏 › 技术社区 › Lonnie Best

10000个按钮的超HTML

hyperhtml

0

Lonnie Best · 技术社区 · 6 年前

我创建了一个测试页面,在这里我使用超HTML展示10000个按钮。代码有点大,可以发布到stackoverflow,但您可以在此页上查看源代码 here 查看代码(单击后预计延迟)。

超HTML完成它的工作所花费的时间比预期的要长,这让我觉得我误用了它。

有什么建议的优化吗?

更新: 似乎我使用的是旧版本的超HTML。在这个测试中,当前的版本正在飞速发展。

1 回复 | 直到 6 年前

1

3

Andrea Giammarchi 6 年前

更新除了测试不是真实的用例之外,还有改进线性孔模板文本的空间,因此7秒现在可以降到大约70毫秒…但是,其余的都适用,这不是使用超HTML的方式。

我创建了一个测试页,在这里我使用超HTML展示10000个按钮

您根本没有正确使用超HTML。它是一个声明性库,希望您忘记 document.createElement 或 addEventListener 甚至 setAttribute .

在这个示例中,您似乎真的在努力避免使用它的所有实用程序,而且由于这不是您第一个关于超HTML的问题,所以您似乎在避免使用它。 documentation 和 examples 故意地。

在这种情况下,你想实现什么?

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

在我看来,这段代码完全是胡说八道。没有一个理智的人会像你那样直接写10000个按钮,我敢打赌,那确实是机器生成的。

创建10000个按钮的代码,或者用hyperhtml创建按钮的方法之一,非常容易在这个论坛中使用:

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 ,这意味着您可以在50帧/秒时显示10000个按钮。

但是,一次显示10000个按钮在现实世界中有接近0个用例,因此您应该了解什么是超HTML,它解决了什么,以及如何从中受益,而不是将它作为 innerHTML .

hyperhtml与innerhtml完全不同,你越早理解它,效果越好。

如果需要innerhtml,不要使用hyperhtml。

如果您想使用超HTML,请忘记任何非声明性的DOM操作,除非确实需要,而事实并非如此。