问题
I'm trying out rel=preload for the first time, using it for a couple of stylesheets. Here is the code in question:
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">
I'm testing in Chrome 61, and I can see that the stylesheets are downloaded as expected, however they're never actually applied, and I get the message on the console saying that a preloaded resource isn't being used.
If I remove the rel=preload in favour of just rel=stylesheet, then it works perfectly fine.
Is there something I'm missing?
回答1:
You need to have 2 lines for each one with rel=stylesheet and one with rel=preload. As preload is just fetching it and not applying.
However you will probably not notice much performance improvement as it hits one line just before the other.
The better option is to inline the css (see here) that is seen above the fold then use javascript to add in the in the css file on page load (see here).
回答2:
What do you think about this approach:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
Resource: https://www.filamentgroup.com/lab/async-css.html
来源：https://stackoverflow.com/questions/46787921/rel-preload-for-stylesheet-isnt-applying-the-styles-once-downloaded