link和@import有什么区别？ #20

Activity

1. CodeRookie262

   added

   CSS

   on Jan 12, 2021
2. jingit770 commented on Jan 12, 2021

   

   jingit770

   on Jan 12, 2021

   More actions

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

   

   CodeRookie262

   on Jan 13, 2021

   OwnerAuthor

   More actions

   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 动态创建和获取；