关于link和script是否阻塞页面的总结

按照我们以前的理解，link不阻塞页面，script阻塞页面，这里需要细化一下

1.link

它并不会阻塞dom tree的生成，但是会阻塞paint（也有可能是render tree）,个人理解，应该是link阻止了css tree,从而导致paint延迟
@import
这个理解为只有引用它的css下载结束之后再去下载，应该是不能并行下载，从而导致阻止paint的问题，并不会阻塞dom tree的生成

image.png

如果在页面中有一个script标签，里面哪怕一句代码都没有，但是却导致了link文件阻塞了，给script标签设置async都不行

image.png

代码如下

  
  
  
  



  
1
  
2

  
  
3

删除这段之后，阻塞消失

2.script

这个标签肯定是会阻塞dom解析的，假如浏览器遇到它，会下载它并执行里面的内容，才去继续解析下面的dom，解决办法有两个，一是在script标签上加上async,一是使用createElement动态创建script