link和@import

link 和 @import 的区别是什么？

1. link 属于 HTML 标签，而 @import 是 CSS 中提供的

2. 在页面加载的时候，link 会同时被加载，而 @import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

3. @import 只有在 IE5 以上才可以被识别，而 link 是 HTML 标签，不存在浏览器兼容性问题

4. link 引入样式的权重大于 @import 的引用（@import 是将引用的样式导入到当前的页面中）

补充：补充几点常被忽略的细节：

• DOM 可控性：link 是 DOM 节点，可以通过 JS 动态插入/移除；@import 必须写在样式文件最开头，JS 难以控制。
• 可并行加载：link 在下载 CSS 时浏览器可以并行下载其它资源；@import 在 CSS 解析到时才会发起请求，且会阻塞后续样式。
• 优先级：link 标签本身不直接决定优先级，两者的样式合并后仍按选择器优先级比较；但 @import 会让外部样式进入"最后"解析的位置，容易被前面的样式覆盖。
• 现代工程：几乎所有项目都推荐使用 <link>，@import 仅在 CSS 文件内部引用公共片段时偶尔使用。