Я пытался использовать что-то вроде этого, чтобы повысить производительность при переходе от простой целевой страницы к тяжелому одностраничному приложению:
<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />Кажется, что нет никакого заметного повышения производительности, когда моя целевая страница находится на поддомене. Скажем, https://subdomain.example.com.
Когда я нажимаю на ссылку, чтобы посетить https://example.com, я все еще вижу долгую задержку на вкладке сети Chrome, поскольку app.jsи app.cssзагружены:
Вот тот же ресурс с отключенной предварительной загрузкой:
Это занимает примерно столько же времени.
Заголовки запроса для одного из ресурсов, загруженных с кэшем предварительной выборки:
Генеральный:
Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200 (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgradeОтклик:
accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfrontЗапрос:
DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36У меня такой вопрос: если Chrome показывает, что используется кэш предварительной выборки, то почему время загрузки контента так велико?
Похоже, что в Chrome есть различные виды кэшей: кэш предварительной выборки, кэш на диске и кэш памяти. Дисковый кеш и кеш-память работают очень быстро (время загрузки 5 мс и 0 мс). Однако предварительная выборка кеша довольно бесполезна, иногда время загрузки составляет 300 мс. Могу ли я получить техническое объяснение, почему это происходит? Это ошибка с Chrome? Я на Chrome 79.0.3945.117.
источник
Ответы:
При добавлении
<link rel=prefetch>на веб-страницу браузер загружает целые страницы или некоторые ресурсы (например, скрипты или файлы CSS), которые могут понадобиться пользователю в будущем. Это может улучшить показатели, такие как First Contentful Paint и Time to Interactive, и часто может привести к тому, что последующие навигации будут загружаться мгновенно.Подсказка предварительной выборки потребляет дополнительные байты для ресурсов, которые не нужны немедленно, поэтому эту технику нужно применять вдумчиво; Предварительная загрузка ресурсов возможна только тогда, когда вы уверены, что они понадобятся пользователям. Не рекомендуется выполнять предварительную выборку, когда пользователи используют медленные соединения. Вы можете обнаружить это с помощью API Network Information.
Существуют разные способы определения ссылок на предварительную загрузку. Самый простой - это предварительная выборка первой ссылки или первых нескольких ссылок на текущей странице. Есть также библиотеки, которые используют более сложные подходы, объясненные позже в этом посте - https://web.dev/link-prefetch/ .
источник
Я могу только догадываться. Уверенный ответ, вероятно, может быть найден только вами, через эксперимент. Слишком много переменных для учета. Но вот несколько идей:
prefetchэто подсказка для браузера. Браузер может игнорировать его по произвольным причинам. Более того, он имеет самый низкий приоритет.Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching(или что-то подобное).
https://www.technipages.com/google-chrome-prefetch
example.com?prefetchзапросы.Проверьте, не устанавливает ли ваш сервер странные заголовки в ответ на
prefetchзапросы. НапримерCache-Control: no-cache. Да, я вижу, что у вас естьcache-control: max-age=31536000, поэтому было бы очень странно, если бы сервер отправлял разные заголовки для одного и того же запроса (ну ... почти одинаково , по крайней мере, вы не сказали, что они есть, и там, по крайней мере, можете быть некоторые заголовки, указывающие, что этоprefetchзапрос), но происходят странные вещи.Вы, вероятно, должны попытаться добавить
crossoriginатрибут. Например<link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />Здесь https://www.w3.org/TR/resource-hints/ вы можете найти этот пример
вполне актуально для вашего случая, но, к сожалению, без объяснения причин.
В оригинальной версии вашего вопроса вы упомянули работников службы ... Если они что-то скачивают или даже что-то загружают вручную, это тоже может быть проблемой. Из-за самого низкого приоритета
prefetchhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F
Я думаю, что то же самое касается Chrome.
Вы пытались переместить свою целевую страницу в корневой домен? Если, да, и
prefetchработает как положено, то да - субдомен является причиной проблемы. И сообщение GUI,Status Code: 200 (from prefetch cache)вероятно, просто глюк. Потому что совсем недавно некоторые вещи стали меняться вprefetchповедении в Chrome. И я пока не знаю, все ли уладилось. В принципе, да, есть определенная вероятность, что вы можетеprefetchтолько из того же происхождения.https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit
источник
Вы должны добавить код ниже, если вы не используете поддомен и хотите получить ресурс из домена.
источник