面试技巧：link和@import的区别

Link 和 @import 是 CSS 中的两种样式表引入方式。在网页设计中，样式表（CSS）是控制网页外观和布局的重要工具。

在引入样式表时，常见的方法包括使用 <link> 标签和 @import 关键字。虽然它们都能实现相同的目标，但它们之间存在一些关键的区别，包括性能、加载顺序和浏览器支持等方面。

<link> 标签

<link> 标签是 HTML 中常用的引入外部资源的方式，包括样式表。它具有以下优点：

• 并行加载：多个 <link> 标签可以同时加载，从而提高页面加载速度。
• 支持预加载：可以使用 rel="preload" 属性来指示浏览器预加载样式表，进一步优化加载性能。
• 更好的浏览器兼容性：几乎所有浏览器都支持 <link> 标签。

以下是使用 <link> 标签引入样式表的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Link Tag</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

@import 关键字

@import 是 CSS 中引入外部样式表的另一种方法，它可以在 CSS 文件中使用。虽然它具有一些优点，但也存在一些缺点：

• 串行加载：@import 会导致样式表的串行加载，一个样式表加载完毕后才会加载下一个样式表，可能会影响页面加载性能。
• 作用域限制：@import 只能在 CSS 文件中使用，无法在 HTML 文件中直接引入。
• 不支持预加载：与 <link> 不同，@import 不支持预加载，无法提前加载样式表。

以下是使用 @import 引入样式表的示例代码：

/* styles.css */
@import url("other-styles.css");
body {
    background-color: #f0f0f0;
}

总结

<link> 标签和 @import 关键字都可以用于引入外部样式表，但在实际应用中，通常推荐使用 <link> 标签。它能够并行加载，支持预加载，并具有更好的浏览器兼容性，从而提高页面加载性能和用户体验。

而 @import 虽然也可以实现相同的功能，但其串行加载和不支持预加载的特性可能会影响页面加载性能，因此在大多数情况下不建议使用。