1.概念介绍
在HTML中，我们使用<link>和`@import`两种方式来引入CSS样式表。
1.1 <link> 与 `@import` 概念区别
<link> 是HTML标签，除了引入CSS文件之外，还能用于其他文件的链接，比如在HTML中引入图片，引入JS脚本等等。
`@import` 是CSS提供的指令，用于引入CSS文件，是CSS语法的一部分。
另外一个区别是 `@import` 只能放在CSS文件的最开头，而且它引入的样式表会等到HTML文档加载结构之后再加载，<link>引入的样式则与HTML文档在解析过程中同步加载，这也是<link>被普遍认为优于 `@import`的原因之一。
2.性能差异
2.1 页面渲染差异
由于 `@import` 引入的CSS文件需要等待HTML页面解析完毕之后才会加载，所以页面渲染会被阻塞，会导致页面加载缓慢，影响用户体验。
2.2 缓存机制差异
在一些浏览器中（比如IE6、IE7），连续引入3个或以上的CSS文件时，使用 `@import` 方式会导致其中一些CSS文件无法缓存起来，从而可以造成一定的浪费。
3.语法习惯
强调一下，因为 `@import` 不能放在CSS的媒体查询内，因此不方面使用响应式设计时的设备适配，所以在语法习惯上不推荐使用。
4.实际开发建议
* 推荐使用 <link> 方式引入CSS文件；
* 避免使用 `@import` 引入样式表文件，特别是在开发页面特别复杂的时候；
* 将CSS文件引入放到HTML文件的 <head>部分中，这样可以让HTML文件结构一开始就渲染，避免使用 `@import` 对页面加载造成阻塞；
* 避免使用太多的CSS文件，建议将多个CSS文件合并成一个文件，从而可以减少HTTP请求次数，提高页面效率。
5.CSS文件之间相互引用
如果在CSS文件之间存在交叉引用的情况，则需要使用 <link> 的方式引入CSS文件。
/* common.css */
@import url("nav.css");
/* nav.css */
.super-navigation a {
// 通用的样式
}
6.总结
通过上述的对比和分析，我们可以得出结论， <link> 方式与 `@import` 方式的性能差异，在具体实践中常常是比较明显的。在实际开发中，我们应该避免使用 `@import` 引入样式表文件，而是倾向于使用 <link> 方式引入。此外，还可以通过合并CSS文件，来进一步提高页面加载速度和性能。