quicklink реализует мгновенное открытие вашей страницы

Автор оригинала: группа quicklink

Переводчик: Джоти, UC International R&D

Спереди написано: Добро пожаловать в официальный аккаунт «UC International Technology», мы предоставим вам качественные технические статьи, связанные с клиентом, сервером, алгоритмом, тестированием, данными, интерфейсом и т. д., не ограничиваясь оригинальностью и перевод.

Ссылки в видимой области страницы (далее область просмотра) могут быть предварительно выбраны в режиме простоя для ускорения последующей загрузки.

• Обнаружение ссылок в окнах просмотра(используя Intersection Observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

• Подождите, пока браузер будет бездействовать(используя requestIdleCallback https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)

• Проверьте, не использует ли пользователь медленное соединение(использоватьnavigator.connection.effectiveType) или с включенным режимом энергосбережения (используяnavigator.connection.saveData)

• Предварительная выборка URL в области просмотра(использовать<link rel=prefetch>или XHR). Может управляться в соответствии с приоритетом запроса (переключается, если поддерживается fetch()).

Этот проект направлен на то, чтобы предоставить веб-сайтам решение для предварительной выборки ссылок в области просмотра пользователя, сохраняя при этом чрезвычайно маленький размер ().

npm install --save quicklink

Или получить его с https://unpkg.com/quicklink.

После инициализации quicklink будет автоматически предварительно выбирать URL-адреса ссылок, которые находятся в области просмотра в режиме ожидания.

Начните быстро:

Например 🌰, вы можетеloadИнициализировать после запуска метода:

Или импортировать модули ES:

Приведенная выше конфигурация работает для многостраничного веб-сайта. Одностраничные приложения могут использовать быстрые ссылки с маршрутизаторами:

• После ввода нового адреса маршрутизации позвонитеquicklink()

• Вызывается для определенного элемента/компонента DOMquicklink()

• перечислитьquicklink({urls：[...]}), передать собственную коллекцию URL-адресов для предварительной выборки

• el: указывает область просмотра элемента DOM, который необходимо предварительно загрузить.

• urls: массив предварительно выбранных статических URL-адресов (если эта конфигурация не пуста, область просмотра не будет обнаруженаdocumentили ссылку на элемент DOM)

• timeout:заrequestIdleCallbackЦелое число времени ожидания, которое необходимо установить. Браузер должен выполнить предварительную выборку перед этим (в миллисекундах), по умолчанию это 2 секунды.

• timeoutFn: укажите функцию обработчика времени ожидания. По умолчаниюrequestIdleCallback. также можно заменить наnetworkIdleCallbackи другие пользовательские функции (https://github.com/pastelsky/network-idle-callback, подробности см. в демо)

• priority: логическое значение, указывающее приоритет выборки. По умолчаниюfalse. Если настроить какtrueпостараюсь использоватьfetch()API (не rel = предварительная выборка)

Для изучения:

• Поддержка обнаружения расширений ресурсов и использование rel=preload для получения высококачественных ресурсов.

• Используйте подсказки приоритета для подсказок важности (https://github.com/WICG/priority-hints)

quicklink:

• Очень маленький запасной вариант для requestIdleCallback

• Требуется поддержка IntersectionObserver (см. CanIUse). Мы рекомендуем реализовывать эту функцию выборочно, используя такой сервис, как Polyfill.io:

  
  

В качестве альтернативы см. полифил Intersection Observer (https://github.com/w3c/IntersectionObserver/tree/master/polyfill).

CanIUse: https://caniuse.com/#feat=intersectionobserver

Пользовательский тайм-аут для операций предварительной выборки

Тайм-аут по умолчанию составляет 2 секунды (черезrequestIdleCallback), здесь перепишем на 4 секунды:

Установите элемент DOM, используемый для обнаружения ссылок

По умолчаниюdocument.

Массив настраиваемых URL-адресов предварительной выборки

Если вы хотите указать список статических URL-адресов для предварительной выборки, а не в области просмотра, вы можете использовать настраиваемые URL-адреса.

Установить приоритет запроса для операций предварительной выборки

По умолчанию низкий приоритет (rel=prefetchили XHR). Для высокого приоритета (priority: true), попробуйте использоватьfetch()Или сделайте шаг назад и используйте XHR.

quicklinkПредоставляемая предварительная выборка представляет собой прогрессивное улучшение с кросс-браузерной поддержкой следующим образом:

• Без полифиллов: Chrome, Firefox, Edge, Opera, браузер Android, интернет-поддержка Samsung.

• Использование полифилла Intersection Observer (около 6 КБ после сжатия/уменьшения): Safari, поддержка IE9+

Некоторые функции поддерживают многоуровневую реализацию. т. е. если {priority: true} и выборка недоступна, будет использоваться XHR.

Прогрессивное улучшение: https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

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

Чтобы продемонстрировать, мы развернули блог Google на Firebase, а затем еще одну версию с быстрой ссылкой, добавленной на домашнюю страницу, чтобы проверить время, необходимое для перехода с домашней страницы к автоматически загружаемой статье. Результаты показывают, что предварительно загруженная версия загружается быстрее.

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

• Вы используете Гэтсби? Теперь его можно скачать бесплатно. оно используетIntersection ObserverВсе ссылки в режиме предварительной выборки, которые вдохновили этот проект.

• Хотите более основанный на данных подход? См. Guess.js. Он использует анализ данных и машинное обучение для предварительной выборки ресурсов в зависимости от того, как пользователи выходят в интернет. Он также имеет плагины для Webpack и Gatsby.

Защищено лицензией с открытым исходным кодом Apache-2.0.

Хорошая рекомендация статьи:

Какая самая надежная библиотека HTTP-запросов JS? Axios, Request, Superagent, Fetch или Supertest

Стремление к максимальной производительности JavaScript: предложение AST для бинарных файлов TC39

«UC International Technology» стремится делиться с вами высококачественными техническими статьями.

Добро пожаловать, чтобы подписаться на наш официальный аккаунт и поделиться статьей с друзьями