浏览器拿到html文档开始解析，先是解析dom，期间会遇到 <script> 和 <link>,
看看这俩标签对 dom 的解析 和 渲染会产生什么影响吧？
<script> 阻塞DOM解析和渲染
<script> 的网络加载、解析、运行 都会阻塞DOM的解析和渲染，直到脚本执行完毕后才会继续解析dom
<script>
console.log(document.querySelector('div'));
</script>
<div /> // 获取不到div
<script> 标签会触发页面Paint
浏览器将 <script> 标签之前的元素渲染出来
<head>中的<script>标签是不会触发Paint的- 内联的
<script>也不会触发Paint
<div>a</div>
<script src='test.js'></script> // 大循环延长js执行时间
<div>b</div>
// 先展示 a div， 然后展示b div
// 如果把script换成内联的，那么结果就是等js运行完毕之后，两个div才会一起显示
<link> 标签不会阻塞DOM解析但会阻塞DOM渲染
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log(document.querySelectorAll('div'))
})
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
<div></div>
// div 会被打印，但是过会儿才渲染出来
<link> 标签会阻塞js的执行（因为js可能会去获取样式信息）
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log(document.querySelectorAll('p'))
})
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
<script>
console.log(Date.now());
</script>
<p>1234</p>
// link阻塞了下方script的执行，所以自然也卡住了dom的解析
// 倘若注释掉上方的script你会发现p会被打印，然后再渲染出来
