Block Parsing: 阻塞解析
script 标签会阻塞 html 页面的解析,阻塞解析:html 页面会被继续下载,但阻塞点之后的标签不会被解析,img、link 等不会发起请求获取外部资源。
阻塞解析
<html>
<body>
<script>
// 打印出 null
console.log(document.getElementById('hi'))
</script>
<script src="./longtime.js"></script>
<div id="hi">Hi</div>
</body>
</html>
Block Rendering:阻塞渲染
阻塞 html 页面渲染,html 页面会继续下载,阻塞点后面的标签会被继续解析,img、link 会继续发送请求获取外部资源,但不会合成渲染树或不会触发渲染,也不会执行 JavaScript 代码。
<link rel="stylesheet">
, <link rel="import">
and @import url("<url>")
会阻塞渲染。