Unpoly предоставляет механизм выборочного обновления страницы посредством извлечения фрагментов из строкового HTML. Это позволяет минимизировать передачу данных, снижать нагрузку на сервер и ускорять отклик интерфейса.
Unpoly обрабатывает HTML как иерархию узлов. При наличии задачи
получить лишь часть документа используется селектор, который указывается
при запросе. Например, при обновлении областей средствами
up.replace библиотека извлечёт из результата только те
элементы, которые соответствуют указанным селекторам.
Ключевой принцип: селектор применяется к корневому узлу результата, а не к исходному документу. Это гарантирует, что в итоговый фрагмент попадёт только необходимый кусок разметки.
Для работы не требуется наличие загрузки по сети. Любая строка, содержащая HTML, может быть разобрана. Unpoly использует внутренний DOM-парсер, создавая временный контейнер-элемент, в который помещается строка. Далее к нему применяется селектор для поиска нужных фрагментов.
Важно учитывать, что строка должна содержать корректную HTML-структуру. Некорректные теги, незакрытые элементы и неправильно вложенные конструкции могут привести к неожиданному результату при анализе.
При совпадении селектора с несколькими элементами будет сформирована коллекция фрагментов. Каждому элементу результата соответствует собственный корень. Это позволяет выполнять массовые обновления интерфейса: например, обновить несколько панелей или списков за один запрос.
Особенность поведения: порядок элементов сохраняется согласно порядку в исходной строке. Это критично при обновлении списков, где порядок их отображения имеет значение.
Процесс включает три основные фазы:
Полученный набор узлов можно использовать для замены существующих элементов на странице. При этом Unpoly сохраняет метаданные интерфейса, расширения, а также состояние фокуса.
Селекторы могут включать в себя псевдоклассы, каскадные конструкции и
атрибуты. Например, извлечение строки по [up-target]
позволяет выбирать элементы, которые сами объявляют свои фрагменты
обновления.
Неизменяемым остаётся правило: любые селекторы должны соответствовать конечному HTML. Селекторы, ориентированные на JS-компоненты, не будут интерпретированы на этапе извлечения, пока эти компоненты не инициализированы.
Если селектор не находит фрагментов, Unpoly рассматривает это как ошибочную ситуацию. Возможен сценарий, при котором сервер возвращает HTML без ожидаемого элемента. Это приводит к отказу обновления и может вызвать уведомление илиfallback-обработку.
Для предотвращения подобных случаев применяется следующий подход:
Извлечённые узлы могут быть вставлены поверх существующих или рядом с ними. При этом используются механизмы монтирования: события, инициализация и повторная привязка поведения. Unpoly обеспечивает последовательность и чистоту обновления, освобождая разработчика от забот о повторной инициализации JS-кода.
Объединение строковых фрагментов с текущим DOM гарантирует, что состояние интерфейса сохранится. Например, открытые вкладки, состояние фильтров и элементы фокусировки не теряются при частичном обновлении.
Стилевые особенности. CSS применяется к новому фрагменту после его встраивания в DOM. Если селектор зависит от контекста, необходимо учитывать, что изменения каскада происходят уже после замены.
Исполнение скриптов. Скрипты, встроенные в HTML-строку, по умолчанию не выполняются повторно. Unpoly предполагает, что логика поведения управляется через инициализацию компонентов.
Атрибуты и состояние. При замене узла теряются его временные состояния, например, выделение текста или внутренние значения неотправленных форм. Поэтому следует тщательно выбирать, какие фрагменты обновлять.
Некоторые реализации предполагают предварительную подготовку HTML на сервере. В этом случае сервер формирует блоки, которые явно предназначены для выборочного извлечения. При использовании этого подхода достигается высокая предсказуемость результата, поскольку структура документа известна заранее, а селекторы рассчитаны именно на неё.
Для устойчивой работы требуется согласовать селекторы и структуру серверных шаблонов. Когда селектор меняется на клиенте, необходимо проверять, соответствует ли ему разметка. Если шаблоны формируются динамически, следует учитывать их вариативность, иначе извлечение может стать нестабильным.
Применение этого механизма позволяет обмениваться только необходимыми фрагментами, уменьшая объём HTML и сокращая задержки. Во многих случаях обновляется лишь небольшой участок страницы вместо полной перезагрузки. Это существенно повышает отзывчивость интерфейса и снижает потребление ресурсов.
Эффективность механизма зависит от грамотного выбора селекторов, правильной структуры HTML и понимания контекста обновления. Оптимальный баланс между объёмом возвращаемого фрагмента и стабильностью интерфейса достигается экспериментально, на основе анализа поведения пользователей и нагрузочного профилирования.