Предварительная загрузка триггера после полной загрузки страницы
Мой сценарий:
- посещений пользователя domain.com (домашняя страница)
- Страница domain.com/products содержит большую библиотеку изображений и довольно большие библиотеки CSS и JS
- когда пользователь посещает domain.com и домашняя страница полностью загружен, мы начинаем предварительную выборку ресурсов и, если возможно, по крайней мере некоторые% изображений из архива.
В настоящее время на некоторых страницах JS "ест" довольно много ресурсов, поэтому запуск предварительной выборки в некоторых случаях во время загрузки страницы не самый лучший ответ - поскольку это вызовет небольшое отставание, когда пользователь взаимодействует с созданными событиями и элементами JS.
Мои вопросы:
- Возможно ли это (будет ли оно работать) вызвать
<link rel="prefetch" href="image.png">
или файл CSS, который будет добавлен в <head>
чтобы он мог предварительно извлечь данные с другой страницы после полной загрузки текущей страницы? - Должен ли я сделать это так же, как рендеринг дополнительной таблицы стилей с использованием 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
Там вы можете прочитать различные состояния и приоритеты о времени выполнения, загрузки и предварительной загрузки, а также некоторые советы по их улучшению.
Ответ 4
preload
CSS и JS с использованием https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content может быть хорошей подгонкой и имеет хорошую поддержку в большинстве современных браузеров: https://caniuse.com/# поиск = преднагрузки
Вероятно, есть лучшие решения, например, предложенные @soulshined, но другой грубый способ сделать это - на другой странице есть etags или заголовки управления кэшем, чтобы использовать AJAX для отправки запросов на ресурсы, которые вы ожидаете загрузить. Это приведет к тому, что браузер запросит эти ресурсы и предварительно заполнит кеш пользователя агента, так что, когда пользователь будет запрашивать этот ресурс на другой странице, произойдет более высокое изменение, кеш будет содержать ресурсы, и он будет загружаться быстрее, чем если бы ему нужно было получить все в первый раз.
Ответ 5
Для предварительной выборки активов существуют некоторые методы предварительной выборки, такие как предварительная выборка DNS, предварительное подключение, предварительная рендеринг и предварительная выборка. В соответствии с требованием вы можете использовать их соответствующим образом. Каждый метод имеет свою собственную цель, это было бы полезно знать каждый из них конкретно.