in the high performance website design in the fifth chapter, I briefly mentioned that @import has some negative impact on the performance of the site, then I Web 2 Expo speech on in-depth study of this issue, and created some of the test page and HTTP waterfall charts, these will be used in the following. The bottom line for this question is: if you want the style sheet to load in parallel to make the page faster, use LINK instead of @import.
LINK vs. @import
as you all know, there are two ways you can import style files into your page. You can use the LINK tag:
/> < link; rel=’stylesheet’; href=’a.css’;
or use the @import method:
I prefer to use LINK because it’s simple – and if you use @import, you must always remember to put @import at the front of the style code, otherwise it won’t work. And it turns out that avoiding @import is equally good for web performance.
I’ll explore the difference between LINK and @import in two ways. In these examples, there are two stylesheets: a.css and b.css. Each style sheet is configured to take two seconds to download, so it’s easier to see how they affect the performance of the site. The first example uses @import to import two style files. This example, which we call @import @import, HTML code can be written like this: