Processing Instructions и маркеры
В DOM всё представлено в виде узлов (Node) разных типов. Получить тип можно через свойство nodeType. Всего в DOM на данный момент 9 типов узлов, один из которых — PROCESSING_INSTRUCTIONS. Он существует, но не используется.
Данный тип узла представлен в HTML открывающим тегом . Вот так выглядит синтаксис:
Это инструкции для парсера, на которые он как-то реагирует, если поддерживает их, или игнорирует, если не поддерживает. Кто работал с XML и XHTML, могут помнить, как с их помощью указывалась версия XML и подключались внешние стили:
До недавних пор processing instructions обрабатывались парсером HTML как обычные комментарии и игнорировались. Всё изменилось с добавлением в Chrome новой функции под названием Declarative Partial Updates.
В Chrome 148 с флагом экспериментальных функций доступны инструкции для парсера:
-
-
-
Инструкция создаёт именованную область в DOM, на место которой подставляется добавленный контент из с атрибутом for, значение которого совпадает с атрибутом name у маркера.
Показать ещё
При нажатии на кнопку «Показать ещё» можно через fetch() запросить у сервера фрагмент разметки с дополнительными карточками вместо JSON. Вместо полной отрисовки всей страницы сервер рисует только карточки.
Сервер отвечает фрагментом HTML с элементом , в котором будет разметка дополнительных карточек. Вставка такого фрагмента внутрь элемента с маркером приведёт к переносу карточек из на место маркера.
Показать ещё
Новый фрагмент может также возвращать маркер для реализации бесконечной подгрузки. В качестве альтернативы можно использовать инструкции и , которые работают в паре.
Суть у них та же — создание области для подстановки динамического контента. Разница в том, что между start и end можно поместить контент, который будет заменён. Это пригодится для лоадеров или как в сценарии с кнопкой.
Показать ещё
Показать ещё
Показать ещё
Прежде всего маркеры предназначены для потоковой передачи HTML, чтобы была возможность досылать фрагменты в произвольном порядке, но помещать их в нужные места. Но варианты использования не ограничиваются потоковой передачей.
Не смотря на поддержку, Shopify уже экспериментирует с этим API для динамического обновления корзины, количества товаров в корзине, товарной сетки, фильтров и так далее. Для API доступен полифил.
#html #web_api
В DOM всё представлено в виде узлов (Node) разных типов. Получить тип можно через свойство nodeType. Всего в DOM на данный момент 9 типов узлов, один из которых — PROCESSING_INSTRUCTIONS. Он существует, но не используется.
Данный тип узла представлен в HTML открывающим тегом . Вот так выглядит синтаксис:
Это инструкции для парсера, на которые он как-то реагирует, если поддерживает их, или игнорирует, если не поддерживает. Кто работал с XML и XHTML, могут помнить, как с их помощью указывалась версия XML и подключались внешние стили:
До недавних пор processing instructions обрабатывались парсером HTML как обычные комментарии и игнорировались. Всё изменилось с добавлением в Chrome новой функции под названием Declarative Partial Updates.
В Chrome 148 с флагом экспериментальных функций доступны инструкции для парсера:
-
-
-
Инструкция создаёт именованную область в DOM, на место которой подставляется добавленный контент из с атрибутом for, значение которого совпадает с атрибутом name у маркера.
Показать ещё
При нажатии на кнопку «Показать ещё» можно через fetch() запросить у сервера фрагмент разметки с дополнительными карточками вместо JSON. Вместо полной отрисовки всей страницы сервер рисует только карточки.
Сервер отвечает фрагментом HTML с элементом , в котором будет разметка дополнительных карточек. Вставка такого фрагмента внутрь элемента с маркером приведёт к переносу карточек из на место маркера.
Показать ещё
Новый фрагмент может также возвращать маркер для реализации бесконечной подгрузки. В качестве альтернативы можно использовать инструкции и , которые работают в паре.
Суть у них та же — создание области для подстановки динамического контента. Разница в том, что между start и end можно поместить контент, который будет заменён. Это пригодится для лоадеров или как в сценарии с кнопкой.
Показать ещё
Показать ещё
Показать ещё
Прежде всего маркеры предназначены для потоковой передачи HTML, чтобы была возможность досылать фрагменты в произвольном порядке, но помещать их в нужные места. Но варианты использования не ограничиваются потоковой передачей.
Не смотря на поддержку, Shopify уже экспериментирует с этим API для динамического обновления корзины, количества товаров в корзине, товарной сетки, фильтров и так далее. Для API доступен полифил.
#html #web_api