likes
comments
collection
share

CSS外部资源引入对决：`link` vs `@import`，胜者为王

作者站长头像
站长
· 阅读数 17

前言

在CSS中，link 和 @import 都是用来引入外部样式表文件的方法，虽然在功能上有一定的重叠，但它们在加载方式、用法位置、兼容性和性能等方面有着明显的差异。

link

定义

<link> 标签是 HTML 中用来引入外部资源的元素，最常见的用途是引入样式表文件，但它也可以用来引入其他资源，比如字体、图标、甚至是其他网页。

基本语法

<link rel="stylesheet" type="text/css" href="styles.css">
  • rel 属性：规定当前文档与被链接文档之间的关系。对于样式表，通常使用 stylesheet。
  • type 属性：可选的，指定被链接文档的 MIME 类型。对于样式表，通常默认为 text/css，所以一般可以省略。
  • href 属性：指定被链接文档的 URL 地址

主要用途：

  • 引入样式表：是 <link> 标签最常见的用法，通过 href 属性引入外部 CSS 文件，从而控制网页的样式和布局。
  • 引入字体文件：可以通过 <link> 标签引入字体文件，以改善页面的排版效果。
  • 引入图标：常用于引入网站图标，如 favicon。
  • 引入其他资源：除了样式表、字体和图标外，<link> 标签还可以用来引入其他类型的资源，比如 XML 文件、RSS 订阅源等。

注意事项：

  • 位置放置：通常将 <link> 标签放置在 HTML 文档的 <head> 元素中，以确保在页面渲染之前加载样式表，从而提升用户体验。
  • 加载方式：<link> 标签引入的外部资源会在页面加载时同时加载，这可能会影响页面加载速度。因此，在使用大型样式表或字体文件时，要考虑到性能问题。
  • 兼容性：<link> 标签在所有现代浏览器中都得到很好的支持，是一个稳定可靠的标准。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Example</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="example.ico">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

在这个示例中，我们使用 <link> 标签引入了一个样式表文件 styles.css 和一个网站图标 example.ico。

@import

@import 是 CSS 中用于引入外部样式表的一种规则，与 <link> 标签相比，它有一些特定的用法和限制。

基本语法：

@import 规则可以出现在 CSS 文件的任何位置，但通常放置在文件的顶部。它的语法如下：

@import url('styles.css');

url()：指定要引入的外部样式表文件的 URL 地址。

特性和用法：

  • 引入外部样式表：@import 主要用于引入外部的 CSS 文件。在主 CSS 文件中使用 @import 可以将多个样式表组合到一个文件中，方便管理和维护。
  • 顺序和加载：@import 规则必须放在样式表的顶部，否则可能会导致样式加载顺序不正确。在加载样式表时，浏览器会按照 @import 规则的顺序逐个加载引入的样式表文件。
  • 性能影响：与 <link> 标签不同，@import 规则会在页面的主 CSS 文件加载完成后再加载引入的外部样式表，这可能会导致页面的加载速度变慢，尤其是在引入多个样式表时。
  • 兼容性：@import 规则在所有现代浏览器中都得到了很好的支持，但在一些较老的浏览器中可能存在兼容性问题。因此，建议在实际开发中慎重使用。

示例

/* main.css */
@import url('reset.css');
@import url('fonts.css');

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
}

/* reset.css */
/* 重置样式 */

/* fonts.css */
/* 字体样式 */

在这个示例中，main.css 是主样式表文件，使用 @import 规则引入了 reset.css 和 fonts.css 两个外部样式表文件。

结语

<link> 标签是 HTML 中引入外部资源的主要方式之一，它在网页开发中扮演着重要的角色。通过合理使用 <link> 标签，我们可以引入样式表、字体、图标等外部资源，从而提升网页的外观和功能。同时，要注意 <link> 标签的放置位置和加载方式，以确保页面的性能和用户体验。

@import 规则是 CSS 中引入外部样式表的一种方式，与 <link> 标签相比，它更多地用于将多个样式表组合到一个文件中，方便管理和维护。但需要注意的是，@import 规则可能会影响页面的加载速度，尤其是在引入多个样式表时。因此，在实际开发中，要根据项目的需求和性能考虑合理使用 @import 规则。

区别总结

link 是 HTML 方式，@import 是 CSS 方式：

  • link：是 HTML 中的一个标签，用于在文档中引入外部资源，如样式表文件。
  • @import：是 CSS 中的一个规则，用于在 CSS 文件中引入外部样式表。

2. 下载方式和性能影响：

  • link：最大限度支持并行下载，多个 link 标签可以同时加载多个外部资源，有利于提高页面加载速度。
  • @import：由于 @import 规则必须放在样式表的顶部，并且会导致串行下载，即在主 CSS 文件加载完成后才会加载引入的外部样式表，可能会导致页面的加载速度变慢，并出现 FOUC (文档样式短暂失效) 现象。

3. 候选样式和隐藏样式：

  • link：可以通过 rel="alternate stylesheet" 属性指定候选样式表，用户可以通过浏览器设置选择不同的样式。
  • @import：可以使用 @import 规则对老版本浏览器隐藏样式，因为对于不支持 CSS 的浏览器来说，@import 规则是未知的。

4. 浏览器支持和兼容性：

  • link：浏览器对 link 的支持早于 @import，因此更加稳定和兼容性更好。
  • @import：由于一些较老的浏览器可能不支持 @import 规则，因此在需要兼容性考虑时，要谨慎使用。

5. 使用位置和规则：

  • link：可以在 HTML 文件的头部或任何位置使用。
  • @import：必须在样式规则之前使用，并且只能在 CSS 文件中使用。

总体来说，link 优于 @import，因为它具有更好的性能和兼容性。link 允许并行下载，并且更早得到浏览器的支持，而 @import 则可能会导致页面加载速度变慢，并且在兼容性上存在一些问题。因此，在实际开发中，应尽量使用 link 标签来引入外部样式表，避免使用 @import 规则。

转载自:https://juejin.cn/post/7333066398175903781
评论
请登录