Расширение `preload`

Расширение preload позволяет загружать фрагменты HTML в кэш браузера до их запроса пользователем, что делает дополнительные страницы кажущимися мгновенно загружаемыми. В качестве разработчика вы можете настроить его поведение для соответствия потребностям и сценариям использования ваших приложений.

ВАЖНО: Разумное кэширование контента может улучшить воспринимаемую производительность вашего веб-приложения, но кэширование слишком многих ресурсов может негативно сказаться на пропускной способности ваших посетителей и производительности сервера, инициируя слишком много неиспользуемых запросов. Используйте это расширение с осторожностью!

Установка

<script src="https://unpkg.com/htmx.org/dist/ext/preload.js"></script>

Использование

Зарегистрируйте расширение с помощью htmx, используя атрибут hx-ext. Затем добавьте атрибут preload к любым гиперссылкам и элементам hx-get, которые вы хотите предварительно загрузить. По умолчанию ресурсы будут загружаться, как только начнется событие mousedown, предоставляя вашему приложению приблизительный отрыв в 100-200 мс при обработке ответов. См. Конфигурацию ниже для других вариантов.

<body hx-ext="preload">
    <h1>What Works</h2>
    <a href="/server/1" preload>WILL BE requested using a standard XMLHttpRequest() and default options (below)</a>
    <button hx-get="/server/2" preload>WILL BE requested with additional htmx headers.</button>
    <h1>What WILL NOT WORK</h1>
    <a href="/server/3">WILL NOT be preloaded because it does not have an explicit "preload" attribute</a>
    <a hx-post="/server/4" preload>WILL NOT be preloaded because it is an HX-POST transaction.</a>
</body>

Наследование настроек предварительной загрузки

Вы можете добавить атрибут preload к элементу верхнего уровня, содержащему несколько элементов <a href=""> или hx-get="", и все они будут предварительно загружены. Будьте осторожны с этим параметром, поскольку вы можете потратить много пропускной способности, если предварительно загрузите больше ресурсов, чем вам нужно.

<body hx-ext="preload">
    <ul preload>
        <li><a href="/server/1">This will be preloaded because of the attribute in the node above.</a>
        <li><a href="/server/2">This will also be preloaded for the same reason.</a>
        <li><a href="/server/3">This will be preloaded, too.  Lorem ipsum.</a>
    </ul>
</body>

Предварительная загрузка связанных изображений

После предварительной загрузки HTML-страницы (или фрагмента страницы) это расширение также может предварительно загружать связанные ресурсы изображений. Оно не будет загружать или выполнять связанный JavaScript или CSS-контент, будь то связанный или встроенный в предварительно загруженный HTML. Чтобы предварительно загрузить изображения, используйте следующий синтаксис.

<div hx-ext="preload">
    <a href="/my-next-page" preload="mouseover" preload-images="true">Next Page</a>
</div>

Конфигурация

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

preload=“mousedown” (ПО УМОЛЧАНИЮ)

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

<a href="/server/1" preload="mousedown">This will be preloaded when the user begins to click.</a>

preload=“mouseover”

Чтобы более активно предварительно загружать ссылки, вы можете инициировать предварительную загрузку, когда пользователь наводит курсор на ссылку. Для предотвращения загрузки многих ресурсов при прокрутке или перемещении курсора по большому списку объектов в действие встроена задержка в 100 мс. Если пользователь убирает курсор с элемента *до* истечения этого таймаута, ресурс не предварительно загружается.

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

<a href="/server/1" preload="mouseover">This will be preloaded when the user's mouse remains over it for more than 100ms.</a>

preload=“имя-пользовательского-события”

Предварительная загрузка также может прослушивать любые пользовательские события в системе, вызывая предварительную загрузку ресурсов (если они еще не кэшированы браузером). Само расширение генерирует событие под названием preload:init, которое можно использовать для инициирования предварительной загрузки, как только объект будет обработан htmx.

<body hx-ext="preload">
    <button hx-get="/server" preload="preload:init" hx-target="idLoadMore">Load More</a>
    <div id="idLoadMore">
        Content for this DIV will be preloaded as soon as the page is ready.
        Clicking the button above will swap it into the DOM.
    </div>
</body>

О событиях касания

Для поддержки устройств с сенсорным экраном добавляется дополнительный обработчик событий ontouchstart, когда вы указываете триггер mouseover или mousedown. Этот дополнительный триггер срабатывает немедленно (без периода ожидания) всякий раз, когда пользователь касается экрана, экономя вам 300 мс ожидания на Android и 450 мс на iOS.

Ограничения

Ссылки должны быть помечены атрибутом preload, или иметь родительский узел с атрибутом preload.
Предварительно загружаться могут только транзакции GET (включая <a href=""> и hx-get=""). В соответствии с принципами REST, транзакции GET предполагаются не изменяющими ресурс. Транзакции, которые могут потенциально изменить ресурс (например, POST, PUT, и DELETE) не будут предварительно загружаться ни при каких обстоятельствах.
При прослушивании событий mouseover, предварительная загрузка ожидает 100 мс перед загрузкой связанного ресурса. Если пользователь убирает курсор с ресурса до истечения этого таймаута, ресурс не предварительно загружается.
Предварительно загруженные ответы будут кэшироваться в браузере только если это разрешено заголовками ответа. Например, заголовок ответа Cache-Control: private, max-age=60 разрешает браузеру кэшировать ответ, в то время как Cache-Control: no-cache его запрещает.

Благодарности

Поведение этого плагина было вдохновлено работой Александра Диуло над InstantClick, который выпущен под лицензией MIT.

Licensed under the Zero-Clause BSD License.
https://htmx.org/extensions/preload/

Расширение preload