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

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: если вы являетесь экспертом по Lit-HTML, прошу прощения, если я не сообщил все последние новости или некоторая информация в этом сообщении не соответствует date 😅 но если вы такой же любопытный, как я 🤠, возможно, вы нашли нужное место, чтобы понять, что такое Lit-HTML и почему я был рад его попробовать 😇.

Что такое Lit-HTML?

Lit-HTML - это невероятно быстрая библиотека шаблонов, которая будет использоваться для новой версии Polymer (v 3.0), она была представлена ​​во время последнего Саммита разработчиков Chrome в Сан-Франциско, и я настоятельно рекомендую вложить ~ 30 минут вашего Посмотрев следующий доклад, чтобы получить представление о библиотеке:

Если у вас сейчас нет 30 минут, вот краткое изложение того, что делает lit-HTML.

Lit-HTML не использует Virtual DOM, как последние тенденции во многих библиотеках пользовательского интерфейса, например, в React или Preact, а вместо этого использует веб-стандарты для создания и обновления компонентов пользовательского интерфейса.
Фактически, эта библиотека использует <template>tag и тегированные шаблонные литералы ES2015 для создания узла DOM.
При таком подходе lit-HTML способен анализировать шаблонные литералы и обновлять только изменяемую часть, сохраняя неизменным статический бит, увеличивая производительность рендеринга по сравнению с подходом виртуального DOM .

Чтобы дать представление о том, чем lit-HTML отличается от библиотеки VDOM, я создал эти анимации, чтобы вы могли сразу увидеть работу, проделанную одной и другой библиотекой по обновлению значения узла DOM и атрибута:

с Preact (или React, оба ведут себя одинаково):

с освещенным HTML:

Как вы можете видеть, lit-HTML сильно оптимизирует обновления, просто пересчитывает, что эффективно должно быть повторно отрисовано, вместо того, чтобы повторно визуализировать весь узел, это поведение выделено в первом теге h1 нашего примера: Preact повторно визуализирует весь node, включающий текст, который является статическим по дизайну (слово «Preact» было статическим, вместо этого число является случайным, которое я использовал для вызова обновления DOM), вместо этого lit-HTML разбивает строку на то, что является статическим, а что нет. может обновлять ТОЛЬКО то, что потенциально может измениться, без необходимости повторного рендеринга чего-либо еще.

Если вам интересно, что за черная магия стоит за lit-HTML, я могу резюмировать это так: ТОЛЬКО ВЕБ-СТАНДАРТЫ!
Как ни странно, свет не используя что-то слишком сложное, кроме веб-стандартов, когда мы определяем шаблон для рендеринга с помощью lit-HTML, мы пишем такой компонент:

Как видите, это всего лишь функция, возвращающая тегированный литерал шаблона, тег соответствует слову html, предоставленному библиотекой lit-html.
Теги в литералах шаблонов имеют свойство манипулировать шаблоном перед возвратом в Фактически, тег обычно является функцией, которая перехватывает вывод литерала шаблона перед возвратом.
Тег html, предоставляемый библиотекой lit, анализирует шаблон перед возвратом его в функцию рендеринга, используемую для обновления DOM, если мы выведем на консоль, каким становится наш шаблон перед визуализацией, мы увидим, что тег html выполняет анализ для разделения статического и динамического и создает массив необработанных данных:

Для тестирования lit-HTML я создал простой тест с некоторыми случайными HTML-элементами, обновляемыми каждые 500 мс.

Глядя на производительность, можно заметить, что обновление значений узлов или атрибутов или обновление поддерева внутри шаблона происходит невероятно быстро по сравнению с подходом VDOM.
Это заметно также с не вложенными компонентами, подобными приведенным выше, я провожу на них несколько тестов. и вот результат:

Эти данные показывают, сколько времени в среднем занимало несколько обновлений DOM.
На изображении ниже мы видим, что иногда Lit-HTML был даже быстрее, чем значения в таблице, а иногда немного медленнее, но по сравнению с Preact (а также React, потому что я пробовал оба), Lit-HTML действительно согласован по времени, расхождение между обновлением и другим действительно небольшое.
Lit-HTML определенно проигрывает Preact или React в первый раз рендеринга, на самом деле я заметил, что Lit-HTML в среднем на 60–70% медленнее только для первых нескольких визуализаций, после этого он очень быстро по сравнению с VDOM.
Кроме того, после 10-15 минут хранения Во время тестирования я заметил, что два компонента больше не синхронизировались, и, по-видимому, Preact-компонент отставал от HTML-компонента.

Стоит упомянуть, как мне удалось получить эти значения, чтобы вы могли попробовать свои собственные тесты, если хотите.
После создания Preact и компонента Lit-HTML я использовал API производительности следующим образом :

  • Перед возвратом html для рендеринга я добавил начальную метку со следующим кодом:
    performance.mark('litStarts’)or performance.mark('reactStarts’)
  • Затем, используя объект MutationObserver, я наблюдал за каждым изменением characterData, childList or subtree вычисления времени, необходимого для обновления DOM с помощью последней метки и методаmeasure из API производительности:

Давайте теперь посмотрим, как создается освещенный HTML-компонент, две основные части - это тег html, используемый или анализирующий литерал шаблона, и метод рендеринга, используемый для обновления DOM, это простой освещенный компонент:

Метод рендеринга должен вызываться каждый раз, когда происходит обновление шаблона, для этого мы можем создать нашу собственную логику через setInterval или requestAnimationFrame, или любой другой способ запустит метод рендеринга после изменения значения внутри шаблона (прокси или реактивный можно попробовать еще 2 интересных метода программирования).
Более подробное объяснение можно найти в этой статье: Немного о рендеринге Lit-html.

К счастью, lit-html интегрирован в следующую версию Polymer (v3.0), поэтому нам не нужно тратить много времени на обертывание этого механизма шаблонов внутри пользовательского кода для создания нашей библиотеки компонентов.
Имейте в виду. , как указано в репозитории Polymer, LitElement еще не готов к производству, но мы можем начать с ним экспериментировать.

Учитывая, что Lit-HTML - это отдельная библиотека шаблонов, если вам неудобно использовать полимер, вы всегда можете создать свою собственную библиотеку компонентов 🤩🤟 и интегрировать ее с вашим любимым управлением состоянием!

Другие онлайн-ресурсы

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