Processing Instructions и маркеры

В DOM всё представлено в виде узлов (Node) разных типов. Получить тип можно через свойство nodeType. Всего в DOM на данный момент 9 типов узлов, один из которых — PROCESSING_INSTRUCTIONS. Он существует, но не используется.

Данный тип узла представлен в HTML открывающим тегом <?, за которым идёт название инструкции, затем произвольное количество атрибутов, как у обычных HTML-элементов и закрывающим тегом ?>. Вот так выглядит синтаксис:

<?instruction attribute="value"?>

Это инструкции для парсера, на которые он как-то реагирует, если поддерживает их, или игнорирует, если не поддерживает. Кто работал с XML и XHTML, могут помнить, как с их помощью указывалась версия XML и подключались внешние стили:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="styles.css"?>

<!-- В HTML это эквивалентно комментариям -->
<!--xml version="1.0" encoding="UTF-8"-->
<!--xml-stylesheet href="styles.css"-->

До недавних пор processing instructions обрабатывались парсером HTML как обычные комментарии и игнорировались. Всё изменилось с добавлением в Chrome новой функции под названием Declarative Partial Updates.

В Chrome 148 с флагом экспериментальных функций доступны инструкции для парсера:

- <?marker name="..."?>
- <?start name="..."?>
- <?end?>

Инструкция <?marker name="..."?> создаёт именованную область в DOM, на место которой подставляется добавленный контент из <template> с атрибутом for, значение которого совпадает с атрибутом name у маркера.

<ul>
  <li>
    <article>
      <!-- карточка 1 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 2 -->
    </article>
  </li>
  <?marker name="cards"?>
</ul>
<button type="button">
  Показать ещё
</button>

При нажатии на кнопку «Показать ещё» можно через fetch() запросить у сервера фрагмент разметки с дополнительными карточками вместо JSON. Вместо полной отрисовки всей страницы сервер рисует только карточки.

Сервер отвечает фрагментом HTML с элементом <template for="cards">, в котором будет разметка дополнительных карточек. Вставка такого фрагмента внутрь элемента с маркером приведёт к переносу карточек из <template> на место маркера.

<!-- ответ сервера -->
<template for="cards">
  <li>
    <article>
      <!-- карточка 3 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 4 -->
    </article>
  </li>
</template>

<!-- итоговый результат -->
<ul>
  <li>
    <article>
      <!-- карточка 1 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 2 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 3 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 4 -->
    </article>
  </li>
</ul>
<button type="button">
  Показать ещё
</button>

Новый фрагмент может также возвращать маркер для реализации бесконечной подгрузки. В качестве альтернативы <? marker name="..."?> можно использовать инструкции <?start name="..."?> и <?end?>, которые работают в паре.

Суть у них та же — создание области для подстановки динамического контента. Разница в том, что между start и end можно поместить контент, который будет заменён. Это пригодится для лоадеров или как в сценарии с кнопкой.

<!-- изначальная разметка -->
<ul>
  <li>
    <article>
      <!-- карточка 1 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 2 -->
    </article>
  </li>
  <?marker name="cards"?>
</ul>
<?start name="button"?>
  <button
    type="button"
    data-page="2"
  >
    Показать ещё
  </button>
<?end?>

<!-- ответ сервера -->
<template for="cards">
  <li>
    <article>
      <!-- карточка 3 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 4 -->
    </article>
  </li>
  <?marker name="cards"?>
</template>
<template for="button">
  <?start name="button"?>
    <button
      type="button"
      data-page="3"
    >
      Показать ещё
    </button>
  <?end?>
</template>

<!-- итоговый результат -->
<ul>
  <li>
    <article>
      <!-- карточка 1 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 2 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 3 -->
    </article>
  </li>
  <li>
    <article>
      <!-- карточка 4 -->
    </article>
  </li>
  <?marker name="cards"?>
</ul>
<?start name="button"?>
  <button
    type="button"
    data-page="3"
  >
    Показать ещё
  </button>
<?end?>

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

Не смотря на поддержку, Shopify уже экспериментирует с этим API для динамического обновления корзины, количества товаров в корзине, товарной сетки, фильтров и так далее. Для API доступен полифил.

#html #web_api