link grammatical structure:
<link href="url" rel="stylesheet" type="text/css">
@import syntax structure:
css @import url used for files, style sheets to the plurality of introducing a style sheet, the page which requires only one of the style sheet, easy to modify and expand
1. in html
<style type="text/css">
@import url
</style>
2. In the css
@import url
link and @import difference:
1. different grammatical structures
1.1 <link href="url" rel="stylesheet" type="text/css">
1.2 @import url
2. different nature
<Link> tag belongs, can be placed in the html code for use, and can be seen as @import css style, css style can be introduced (<link> tag belongs html, css and @import is provided)
3. The page loads
When the page loads, <link> will be loaded simultaneously, and cited @import css will wait until the page is finished loading reloading
4. Compatibility.
@import only be recognized in IE5 above, and <link> tag is html, no compatibility problems
5. Priority
Whether <link> or @import, the priority order according to the reference loading, after loading the high priority
6. controllability
Js use can only be used to control the change pattern dom <link> tag
Why avoid css @import
In the proposed web front-end optimization, it is not recommended to use css @import because in this way is equivalent to the load css css on the bottom, so @import will increase the delay in page load
As to why the delay will increase because of the use @import file references refer to it only word that css file is downloaded, parsed, the browser will know there is another css need to download, then you will want to be in, and then then parse render tree to build a series of operations. Thus css css @import will cause longer delay analysis of blank page, so introducing avoid css @import, using <link> tag manner