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

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

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

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

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

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

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
});

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

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

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

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

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

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

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

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

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