hyperHTML для 10000 кнопок

Question

Я создал тестовую страницу, где я использую hyperHTML для демонстрации 10000 кнопок. Код немного велик для публикации в stackru, но вы можете просмотреть исходный код на этой странице здесь, чтобы увидеть код (ожидайте задержку после нажатия).

hyperHTML занимает больше времени, чем ожидалось, чтобы завершить свою работу, что заставляет меня думать, что я злоупотребляю ею.

Любые предложенные оптимизации?

Обновление: кажется, я использовал более старую версию hyperHTML. Текущая версия в этом тесте работает быстро.

Answer 1

Обновление помимо теста, не являющегося реальным сценарием использования, было место для улучшений литералов шаблонов с линейным отверстием, так что теперь 7 секунд сократились примерно до 70 мс... однако, остальное применимо, это не то, как вы используете hyperHTML.

---

Я создал тестовую страницу, где я использую hyperHTML, чтобы продемонстрировать 10000 кнопок

Вы не используете HyperHTML должным образом вообще. Это декларативная библиотека, которая хочет, чтобы вы забыли об использовании document.createElement или же addEventListener или даже setAttribute,

Похоже, что вы действительно изо всех сил стараетесь избежать всей его полезности в этом примере, и, поскольку это не ваш первый вопрос о hyperHTML, похоже, что вы намеренно избегаете его документации и примеров.

В таком случае чего вы пытаетесь достичь?

Код немного велик для публикации на stackru

Этот код - абсолютная чепуха, ИМО. Ни один здравомыслящий человек никогда не напишет в строке 10000 кнопок, как вы, и я готов поспорить, что это действительно машина.

Код для создания 10K кнопок, или один из способов, в 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что-то опять же не очень нужно, но единственное, что имеет смысл для эталонного теста, так что результатом является результат, показанный в этом Code Pen, и время выполнения здесь 19.152msЭто означает, что вы можете показывать 10.000 кнопок со скоростью 50 кадров в секунду.

Однако одновременное отображение 10.000 кнопок имеет практически 0 вариантов использования в реальном мире, поэтому вам следует лучше понять, что такое hyperHTML, что он решает и как извлечь из этого выгоду, а не использовать его как innerHTML,

hyperHTML на 100% отличается от innerHTML, и чем раньше вы это поймете, тем лучше.

Если вам нужен innerHTML, не используйте hyperHTML.

Если вы хотите использовать hyperHTML, забудьте о любой операции DOM, которая не является декларативной, если в ней нет особой необходимости, если это совсем не так.