问题
The JavaScript on my website loads several JSON to initialize itself.
I would like to preload them so, when the JavaScript will launch an Ajax request on it, they will be loaded instantaneously.
A new link tag exists for that.
I tried to use it to load a JSON like that :
<link rel="preload" href="/test.json">
However, Chrome seems to load it twice and present a warning in the console :
The resources test.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
So it seems that preload doesn’t work for JSON. Indeed, I haven’t found reference to JSON in the specification.
Is that correct or am I doing it wrong ?
回答1:
According to https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content , you have to add as="prefetch" for JSON files.
So your code becomes
<link rel="preload" href="/test.json" as="fetch">
It's supported by all modern browsers and you get a warning message if this resource is not used within a few seconds because it is counterproductive to "preload" it in a such case (delay, double load etc.)
It's different from <link rel="prefetch" ...> which is to anticipate future navigation and not supported widely.
A Chrome illustrated article about this: https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
回答2:
If you have the same problem as me, your response is probably being sent with Vary: Accept, the preload request is sent with Accept: */*, and the fetch/xhr request is being made with Accept: application/json.
It seems like the preload Accept: behavior can't be changed (sigh), so you'll have to either remove the Vary: Accept, or make the fetch/xhr request with a matching Accept: header.
回答3:
Turns out there has been a bug in Chrome for using the fetch API combined with rel=preload here. I solved this by using XMLHttpRequest instead.
Even though it seems to have been fixed in Chrome 62 it seems like I could still reproduce this on my Chrome 63.
回答4:
You have to add not only as="fetch", but (based on this comment) also crossorigin="anonymous". This should work:
<link rel="preload" href="/test.json" as="fetch" crossorigin="anonymous">
回答5:
Try as="xhr". Seems to be working for me in Chrome when I do a server push - that's not exactly the same as the HTML tag but if you are getting that resources via Ajax / XmlHttpRequest, this might fix it.
回答6:
Try as="object". Seems to work for me:
<link rel="preload" href="/test.json" as="object">
来源：https://stackoverflow.com/questions/41655955/why-are-preload-link-not-working-for-json-requests