Link syntax structure:
<link href=”url” rel=”stylesheet” type=”text/css”>
@import syntax:
@import URL is used in CSS files to import multiple style sheets into one style sheet. You only need to import one style sheet in a page for easy modification and extension
1. In HTML
<style>
@import url
</style>
2. In the CSS
@import url
The difference between link and @import
1. Differences in grammatical structure
2. They are different in nature
It’s a tag, and it can only be used in HTML source code, whereas @import can be viewed as a CSS style, and you can import CSS styles (it’s an HTML tag, and @import is provided by CSS)
3. Page loading
When the page is loaded, it will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded
4. Compatibility.
@import is only recognized in IE5 and is an HTML tag
5. The priority
Whether it is @import, the priority is based on the loading order, and the post-loading priority is higher
6. Controllable
Using JS to control DOM changes can only be done using tags
Why avoid using CSS @import
In web front-end optimization recommendations, it is not recommended to use CSS @import because loading CSS in this way is like putting CSS at the bottom, so @import adds latency to web page loading
The reason for the added delay is that the @import reference file will not know that another CSS needs to be downloaded until the CSS file referenced by the @import reference is downloaded and parsed, and then the browser will think about it, parse it, build the Render Tree, and so on. Therefore, the CSS @import resolution delay will lengthen the blank period of the page. Therefore, avoid the CSS @import and use labels to import CSS @import