【我不熟悉的css】link 标签不会阻塞dom的解析，但是会阻塞渲染，link 会阻塞后面 js 脚本的运行，href和src的区别，@import 不阻塞解析

1. link 不会阻塞 dom 的解析，但是会阻塞渲染

很好理解，因为 link 可以理解为一个链接，这个链接就放在那里，在解析 dom 的时候，是用不到的，所以不会阻塞 dom 的解析过程。

但是渲染页面的时候需要设置各种样式，自然需要获取链接中的 css 样式，所以 link 会阻塞渲染过程。

同理我们可以试着区分一下href和src

1. href: 是和链接绑定的，类似一个跳转的地址（外部链接），link和a标签使用
2. src 指向的是资源 ，script 和 iframe使用
3. 所以，src指向的资源是会dom渲染的阻塞的

href是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。 src是source的简写，目的是要把文件下载到html页面中去。

2. js 脚本会阻塞html解析和渲染

除非设置 defer 和 async

3. link 会阻塞后面 js 脚本的执行

一句话说，如果 js 脚本执行时 link 资源没有加载解析完，那就得等 link 资源加载完，生成CSSOM，再执行脚本，再进行渲染。

link 阻塞了 js, js 阻塞了dom 解析

不管 js 脚本中有没有对 cssom 的操作，只要 cssom 没构建完，就等它构建完

JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行CSS 文件下载，解析操作，再执行 JavaScript 脚本。所以说 JavaScript 脚本是依赖样式表的，这又多了一个阻塞过程。

3. css中的@import

css中的@import需要写在css文件中，或者style标签内，只能加载css样式，@import 会等到页面全被下载完之后再下载 import 的内容！

总之 @import 不会阻塞页面的加载和渲染，但是如果 import 的文件加载时间过长会产生样式闪烁的问题！

[html] 第1天 页面导入样式时，使用link和@import有什么区别？ · Issue #1 · haizlin/fe-interview · GitHub