☕ 5 способов создания DOM-элементов из HTML-строк методами JavaScript
|
Создание DOM-элементов из строк обеспечивает: |
- Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.
- Гибкость – можно легко генерировать HTML на основе данных, полученных от пользователя или с сервера.
- Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.
- Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.
|
Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами. |
Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым. |
Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>. |
Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты. |
Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты. |
Range.createContextualFragment |
Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify. |
SVG-графика предоставляет нам стандартизированный способ создания изображений и иконок, которые можно отображать в любом размере без потери качества изображения. Но разобраться в методах SVG не так-то просто. На помощь придет интерактивный справочник SSSVG. |
SSSVG поможет быстро понять принцип работы всех основных атрибутов |
Этот «Тетрис» сделан полностью на SVG |
Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide. |
В гайде подробно разобраны десятки примеров использования :has() |
Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций: |
- Можно интегрировать с существующими React-проектами.
- Можно использовать как CMS.
- Позволяет подключать разные источники данных и бэкенд-сервисы.
- Совместим с Next.js и Gatsby.
- Поддерживает оптимизацию производительности, включая статическую генерацию сайтов и оптимизацию изображений.
|
article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL. |
Turndown – Node.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом. |
article-extractor + turndown подготовят контент для LLM |
15 полезных расширений VS Code для фронтендера |
- Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.
- Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.
- DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.
- Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.
- ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.
- Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.
- GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.
- Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.
- GraphQL – набор расширений, упрощающих работу с GraphQL.
- Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.
- Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.
- Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.
- Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.
- Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.
- Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.
|
⚛️ Как выбрать оптимальную стратегию рендеринга
|
Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга: |
- Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).
- Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).
- Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).
- Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).
- Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).
|
Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.
Генератор статических сайтов (SSG)
Идеально подходит для страниц с редко меняющимся контентом, макетов сайтов, документации и лендингов, для которых важна максимальная скорость загрузки.
Преимущества:
|
- Самая быстрая загрузка страниц.
- Отличные показатели SEO.
- Самая низкая нагрузка на сервер.
- Низкие затраты на инфраструктуру.
|
- Увеличенное время сборки для сайтов с большим количеством страниц.
- Обновление контента требует новой сборки и развертывания.
|
Рендеринг на стороне сервера (SSR) Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.
Преимущества:
|
- Всегда отдает свежий, актуальный контент.
- Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.
|
- Загрузка происходит медленнее, чем при использовании SSG или ISR.
- Показатель времени до первого байта (TTFB) может быть неудовлетворительным.
- Потребляет больше серверных ресурсов.
|
Инкрементальная статическая регенерация (ISR)
Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.
Преимущества:
|
- Сохраняет быструю загрузку страниц, как у SSG.
- Позволяет обновлять контент по требованию без полной пересборки.
- Эффективно масштабируется на большое количество страниц.
- Может быть экономичнее, чем SSR, в некоторых случаях.
|
- Требует тщательного управления стратегиями инвалидации кэша.
|
Рендеринг на стороне клиента (CSR) Подходит для интерактивных элементов страницы, требующих немедленной обратной связи, админ-панелей с данными в реальном времени и приложений типа Notion, которые непрерывно синхронизируют вводимые пользователем данные с сервером.
Преимущества:
|
- Самый интерактивный пользовательский опыт.
- Плавные переходы между состояниями приложения.
- Взаимодействие с внешними данными в реальном времени.
|
- Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.
- Оптимизация Core Web Vitals может быть сложной.
- Требует тщательного управления состоянием на клиенте.
|
Частичный пререндеринг (PPR)
PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.
Преимущества:
|
- Мгновенная загрузка страницы (как у SSG).
- Плавная потоковая передача динамического контента.
- Улучшенная производительность с меньшими затратами на разработку.
|
- Все еще находится в стадии исследований и разработки.
- Может потребовать рефакторинга кода для включения в существующий проект.
|
Выбор стратегии рендеринга |
При выборе стратегии рендеринга нужно учитывать следующие факторы.
Как часто обновляется контент?
|
- Статический контент лучше всего обрабатывать генератором статических сайтов.
- Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.
- Обновление контента в реальном времени требует серверного или клиентского рендеринга.
|
Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.
Насколько важно продвижение страницы в поисковых системах?
|
- Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.
- Высоких показателей CWV легче добиться на статических и серверных страницах, чем на страницах с клиентской загрузкой внешних данных.
|
Насколько активно пользователь будет взаимодействовать со страницей? |
- Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.
- В противном случае может потребоваться SSR (с гидратацией на стороне клиента).
|
Каковы требования к скорости загрузки? |
- Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.
- Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).
- CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.
|
Нужно ли персонализировать контент? |
- Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.
- ISR может работать в случаях, когда можно кэшировать персонализированный контент, например, настройки веб-приложения.
- SSG не позволяет персонализировать контент.
|
|
|
Понравилась ли вам эта рассылка? |
|
|
Вы получили это письмо, потому что подписались на нашу рассылку. Если вы больше не хотите получать наши письма, нажмите здесь.
|
|
|
|
