按照我们以前的理解，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
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link href="./test.css" rel="stylesheet" />
<link href="https://cdn.mdn.mozilla.net/static/build/styles/home.c101c7eba059.css" rel="stylesheet" />
</head>
<body>
<div class="test">1</div>
<div class="test column-callout">2</div>
<script type="text/javascript">
//document.querySelector('.test').style.background = 'green'
</script>
<div class="test">3</div>
</body>
</html>
删除这段之后，阻塞消失
<script type="text/javascript">
//document.querySelector('.test').style.background = 'green'
</script>
2.script
这个标签肯定是会阻塞dom解析的，假如浏览器遇到它，会下载它并执行里面的内容，才去继续解析下面的dom，解决办法有两个，一是在script标签上加上async,一是使用createElement动态创建script
网友评论