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

Мой сценарий:

  • посещений пользователя domain.com (домашняя страница)
  • Страница domain.com/products содержит большую библиотеку изображений и довольно большие библиотеки CSS и JS
  • когда пользователь посещает domain.com и домашняя страница полностью загружен, мы начинаем предварительную выборку ресурсов и, если возможно, по крайней мере некоторые% изображений из архива.

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

Мои вопросы:

  1. Возможно ли это (будет ли оно работать) вызвать <link rel="prefetch" href="image.png"> или файл CSS, который будет добавлен в <head> чтобы он мог предварительно извлечь данные с другой страницы после полной загрузки текущей страницы?
  2. Должен ли я сделать это так же, как рендеринг дополнительной таблицы стилей с использованием JS, где я добавляю новый тег в <head> в качестве файла таблицы стилей, чтобы он мог визуализировать.. или есть другой способ?

Ответы

Ответ 1

Вы можете использовать хранилище кэшей для предварительной выборки (precache). Я работаю над проектом с открытым исходным кодом, который использует этот подход. Хотя, чтобы обслуживать истребители, вам нужен рабочий. Логика поиска средств в моем проекте выглядит это.

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

Активы приобретаются после загрузки lib, поэтому я не дожидаюсь загрузки всей страницы. Возможно, я должен использовать requestIdleCallback, чтобы ждать, пока браузер не будет работать.

Надеюсь, это дает вам некоторое вдохновение.

Ответ 2

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

document.addEventListener("DOMContentLoaded", function(event) { 
      var script = document.createElement("link");
      script.rel = "stylesheet";
      script.href= "stylesOfAnotherPage2.css";

      document.getElementsByTagName("body")[0].appendChild(script);//or head
});

Когда вы загружаете page1, stylesOfAnotherPage2.css кэшируется, поэтому, когда вызывается страница2, stylesOfAnotherPage2.css уже кэшируется, если page2 вызывает тот же файл.

Ответ 3

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

Предварительные подсказки

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

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">

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

enter image description here

Ответ 4

preload CSS и JS с использованием https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content может быть хорошей подгонкой и имеет хорошую поддержку в большинстве современных браузеров: https://caniuse.com/# поиск = преднагрузки

Вероятно, есть лучшие решения, например, предложенные @soulshined, но другой грубый способ сделать это - на другой странице есть etags или заголовки управления кэшем, чтобы использовать AJAX для отправки запросов на ресурсы, которые вы ожидаете загрузить. Это приведет к тому, что браузер запросит эти ресурсы и предварительно заполнит кеш пользователя агента, так что, когда пользователь будет запрашивать этот ресурс на другой странице, произойдет более высокое изменение, кеш будет содержать ресурсы, и он будет загружаться быстрее, чем если бы ему нужно было получить все в первый раз.

Ответ 5

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