hyperHTML для 10000 кнопок - PullRequest
Новая
       20

hyperHTML для 10000 кнопок

0 голосов
/ 14 декабря 2018

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

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

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

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

1 Ответ

0 голосов
/ 15 декабря 2018

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

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

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

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

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

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

Этот код - абсолютная чепуха, ИМО.Ни один здравомыслящий человек никогда не напишет 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, что-то снова недействительно необходим, но единственное, что имеет смысл для эталонного теста, так что результат - это результат, показанный в этой кодовой ручке , а время выполнения здесь 19.152ms, что означает, что вы можете показать 10.000 кнопок при 50FPS.

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

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

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

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

...