Kozack
@Kozack
WordPress guru

Как проверить, что документ в link[rel="preload"] загрузился и был использован из кэша?

Немного контекста

Я работаю над JavaScript приложением. В нем есть плейлист. По сути это просто массив ссылок для <iframe>. Пользователь нажимает кнопку, в фрейм вставляется первый УРЛ. Нажимает ещё раз, в этот же фрейм вставляется следующий и так далее.


Суть вопроса.
Так как я знаю, что пользователю скоро понадобится загрузить во фрейме некий урл, я пытаюсь заставить браузер его предзагрузить и кэшировать. Чтобы когда я вставил УРЛ непосредственно в сам фрейм, он загрузился из кэша.
Делаю это так:
const link = document.createElement('link')
link.rel = 'preload'
link.href = href.toString()
link.as = 'document'
document.head.appendChild(link)

Но, не похоже на то, что это даёт какой-то эффект. В отладчике браузера, после вставки тега не появляется информация о новом запросе.

Если же вместо link.rel = 'preload' использовать link.rel = 'prefetch' то после вставки теги, в отладчике появляется запись о новом сетевом запросе с низким приоритетом. Однако, когда пользователь нажимает на кнопку и этот же УРЛ вставляется в фрейм, то в отладчике появляется запись о сетевом запросе, но там не указано, что страница взята из кэша. Похоже на то, что документ загружается заново.

Каким способом можно убедится, что нужный мне документ был загружен с низким приоритетом, кэширован, и в фрейм вставлялся из кэша? А если это не работает как можно узнать почему? Есть какой-то "отладчик" для этого?

Мета.
В самом отладчике кэширование выключено.
Ссылки в фрейм вставляются с другого домена
Может ли на это как-то влият заголовки которые отдаёт сервер ссылок для фрейма?
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 2
xEpozZ
@xEpozZ
Веб-разработчик
Откройте DevTools и обновите страницу. В списке загруженных будет нужный документ и информация откуда он грузился
Ответ написан
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Приведенные способы работать не будут. Вариант с preload as="document" отпадает — в Хроме выдает ошибку (см.консоль). prefetch не гарантирует загрузку (остается на усмотрение браузера), а также, может ругаться сообщением безопасности на ссылку с другого домена (X-Frame-Options: SAMEORIGIN). Вариант решения: подгружайте содержимое iframe вставкой в разметку в нужный момент (отображение можно скрыть стилями).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы