link引用样式与@import

1、@import 必须放在css文件的顶部,否则不会被浏览器加载;

2、在外部的css文件中使用@import会使页面在加载时增阿基额外的延迟;

3、虽然规则允许在css文件中使用@import引用外部的样式,但是浏览器不能并行下载,会使页面增加额外的往返耗时;

假如,在第一个css文件first.css文件中使用了 @import url('second.css'), 那么浏览器就必须先把first.css文件下载、解析和执行后,发现需要处理second.css,然后才会去下载并解析second.css ;

所以,好的方式是使用link方式代替@import 方式。

link 与 @import的区别:

1、老祖宗的差别: link是属于XHTML标签,而@import则是css提供的一种引用样式的方式; link标签除了引用css文件外,还可以做其他很多事情,像指定RSS,定义rel连接属性,而@impoer只能加载样式文件;

2、加载顺序的差别:当一个网页被加载的时候,link引用的文件会被同时并行下载,而@import引用的css文件在页面全部加载完成后才会被下载;

3、兼容性问题:@import是css2.1提供的,所以老的浏览器不支持;

link 与 @import 都可以通过js的方式嵌入到页面中;

猜你喜欢

转载自blog.csdn.net/aifengzi/article/details/82110373