link和@import加载CSS文件的区别

CSS @import

  • @import 用于从其他样式表导入样式规则
  • @import 必须在CSS文档的头部,但可以在@charset规则后面
  • @import 不是一个嵌套语句,不能在条件组的规则中使用
  • @import 支持媒介查询

link和@import的区别

  • 差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

  • 差别2:加载顺序的差别。

当在外联css文件A中使用@import引用另一个css文件B时,只有等css文件 A下载完解析时,浏览器才知道还有css文件B需要下载,此时css文件A和css文件B是串行加载的。 如果css文件A和css文件B都是通过link加载,则是并行的。

  • 差别3:兼容性的差别。

由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

  • 差别4:使用dom控制样式时的差别。

我们可以通过js创建一个link标签,然后加载一个css文件。从而改变某一个dom的样式。而js是无法控制@import的。

js 复制代码
        let link = document.createElement('link')
        link.href = './link.css'
        link.rel = 'stylesheet'
        document.body.append(link)

不建议使用@import

  • 原因一:使用@import引入的CSS会影响浏览器的并行下载

使用@import引用的CSS文件只有在引入它的那个CSS文件被下载、解析之后,浏览器才会知道还有另外一个CSS需要下载,这时才会去下载,然后下载后开始解析、构建render tree等一系列操作。这就导致了浏览器无法并行下载所需的样式文件。

案例A:在css文件中@import另一个css文件, 串行加载

link.css

js 复制代码
@import url(./@import.css);
.box {
    width: 200px;
    height: 300px;
    background-color: red;
}

@import.css

js 复制代码
.box {
    width: 100px;
    height: 100px;
    background-color: green;
}

案例B:2个css文件都使用link加载,并行加载

js 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./@import.css" rel="stylesheet" />
    <link  href="./link.css" rel="stylesheet" />
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 原因2: @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件。
相关推荐
楚轩努力变强35 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端37 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python1 小时前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸3 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest