link和@import有什么区别？

[CodeRookie262]

[jingit770]

link和@import一个是与页面一起加载出来，一个事页面出来后加载，当网络不稳定时@import的这个缺点很明显。
link除了可以连css和JS还有其他的，@import只能用与css

[CodeRookie262]

link和@import一个是与页面一起加载出来，一个事页面出来后加载，当网络不稳定时@import的这个缺点很明显。
link除了可以连css和JS还有其他的，@import只能用与css

@jingit770 Nice

以下是我的理解：

link

• 属于 html 标签，不仅可以导入外部资源，还可以定义rel连接属性和定义图标；
• 和页面一同加载，（浏览器会异步开启一个 HTTP网络请求线程去下载对应的 css 文件，在请求资源时 GUI渲染进程 不会等待观察资源是否下载完，而是会继续渲染页面，直到渲染完毕后再解析和加载下载完的 css 文件）；
• 无兼容问题；
• 支持 js 动态创建和获取；

@import

• 属于 CSS 语法，只能在 CSS 文件或者 Style 标签中导入样式；
• 页面加载完毕后再加载（页面会同步发起一个 HTTP 网络请求线程去下载引入的文件，会等待到文件下载完成解析并且渲染，进而造成在请求下载期间阻塞 GUI 渲染进程）；
• 属于 CSS2 语法，存在较低浏览器无法正常引入外部 css 样式；
• 无法通过 js 动态创建和获取；