CSS不会阻塞DOM解析但会阻塞渲染，JS会阻塞DOM解析。CSS会阻塞JS执行，浏览器在遇到JS标签时会触发渲染，除非使用defer或async属性。
CSS 不会阻塞 DOM 解析，但是会阻塞 DOM 渲染
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
var p = document.querySelector('p')
console.log(p)
})
</script>
<link rel="stylesheet" href="./style.css?sleep=3000">//3s后返回css文件,设置P标签为浅蓝色。
</head>
<body>
<p>hello world</p>
</body>
页面初始显示为空白，控制台打印出了p元素，同时浏览器标签页上加载loading，3s后页面显示出浅蓝色的hello world。
由此可知，CSS不会阻塞DOM的解析，如果说CSS阻塞DOM解析的话，那么p标签不会被解析，进而DOM不会被解析完成，CSS请求过程中也就不可能会触发DOMContentLoaded事件。虽然DOM很早就被解析完成，但是p标签却迟迟没有渲染，原因在于CSS样式还未请求完成，在样式获取后hello world才被渲染出来，所以说CSS会阻塞页面渲染。更为严谨一点的说，CSS会阻塞render tree的生成，进而会阻塞DOM的渲染。
JS会阻塞DOM解析
<head>
<script>
document.addEventListener
最低0.47元/天 解锁文章
扫一扫
1446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
