分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析，使用指南

最新推荐文章于 2024-04-13 17:56:13 发布

2401_84092727

最新推荐文章于 2024-04-13 17:56:13 发布

阅读量1.1k

点赞数 29

分类专栏：程序员文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/2401_84092727/article/details/137402359

版权

程序员专栏收录该内容

281 篇文章 1 订阅

订阅专栏

// app.js

const express = require(‘express’)

const fs = require(‘fs’)

const app = new express()

const port = 3000

const sleepFun = time => {

return new Promise(res => {

setTimeout(() => {

res()

}, time)

})

}

const filter = (req, res, next) => {

const { sleep } = req.query || 0

if (sleep) {

sleepFun(sleep).then(() => next())

} else {

next()

}

app.use(filter)

app.use(‘/static/’, express.static(‘./static/’))

app.get(‘/’, function (req, res, next) {

fs.readFile(‘./index.html’, ‘UTF-8’, (err, data) => {

if (err) return

res.send(data)

})

app.listen(port, () => {

console.log(app is running at http://127.0.0.1:${port}/)

})

// static/index.js

var p = document.querySelector(‘p’);

console.log§;

// static/index.css

p { color: lightblue; }

复制代码

接着就是index.html的准备工作，其中HTML部分的架子就长下面那样，然后你只需要记住DOMContentLoaded事件将在页面DOM解析完成后触发。

hello world

复制代码

CSS 不会阻塞 DOM 解析，但是会阻塞 DOM 渲染

首先在index.html插入如下<link>标签，然后在浏览器输入http://127.0.0.1:3000/访问此页面。

hello world

复制代码

页面初始显示为空白，控制台打印出了p元素，同时浏览器标签页上加载loading，3s后页面显示出浅蓝色的hello world。

在这里插入图片描述

以上情况也就说明，CSS不会阻塞DOM的解析，如果说CSS阻塞DOM解析的话，那么p标签不会被解析，进而DOM不会被解析完成，CSS请求过程中也不可能会触发DOMContentLoaded事件。而且在css请求过程中，控制台立即打印出了p元素，由此也验证了此结论的正确性。

另一个情况就是，虽然DOM很早就被解析完成，但是p标签却迟迟没有渲染，原因在于CSS样式还未请求完成，在样式获取后hello world才被渲染出来，所以说CSS会阻塞页面渲染。

简单阐述一下浏览器的解析渲染过程，解析DOM生成DOM Tree，解析CSS生成CSSOM Tree，两者结合生成render tree渲染树，最后浏览器根据渲染树渲染至页面。由此可以看出DOM Tree的解析和CSSOM Tree的解析是互不影响的，两者是并行的。因此CSS不会阻塞页面DOM的解析，但是由于render tree的生成是依赖DOM Tree和CSSOM Tree的，因此CSS必然会阻塞DOM的渲染。

更为严谨一点的说，CSS会阻塞render tree的生成，进而会阻塞DOM的渲染。

JS 会阻塞 DOM 解析

为了避免加载CSS造成的干扰，如下仅关注JS的执行情况，其中for循环的循环体中逻辑暂不考虑，仅仅是让JS执行更多时间。

hello world

复制代码

浏览器访问页面，初始时为空白且控制台打印null，浏览器loading短暂延时后，控制台打印出p标签同时页面渲染出hello world。

在这里插入图片描述

以上情况很容易说明JS会阻塞DOM解析了，JS执行初控制台打印null，因为此时p标签还未被解析，for循环执行时，可以明显感觉到执行耗时，执行完成p标签被解析，此时触发DOMContentLoaded事件，控制台打印出p标签，同时页面渲染出hello world。

比较合理的解释就是，首先浏览器无法知晓JS的具体内容，倘若先解析DOM，万一JS内部全部删除掉DOM，那么浏览器就白忙活了，所以就干脆暂停解析DOM，等到JS执行完成再继续解析。

CSS 会阻塞 JS 的执行

如下在页内JS脚本前插入<link>标签，并且延时3s获取CSS样式。

hello world

复制代码

初始页面空白，浏览器loading加载3s后，控制台打印出null，紧接着打印出p标签，同时页面渲染出浅蓝色p标签。

在这里插入图片描述

此情况好像是CSS不仅阻塞了DOM的解析，而且也阻塞了DOM渲染。

但是首先要思考下是什么阻塞了DOM的解析，刚刚已经证明了CSS不会阻塞DOM的解析，所以只可能是JS阻塞了DOM解析。但是JS只有两行代码，不会阻塞长达3s左右的时间。所以只有一个可能就是CSS会阻塞JS的执行。

因此输出结果也能大致分析出来了，首先解析到第一个<script>标签，document绑定上DOMContentLoaded事件，紧接着解析到link标签，浏览器请求CSS样式，由于CSS不会阻塞DOM解析，因此浏览器继续向下解析，发现第二个<script>标签，浏览器请求JS脚本，此时JS获取完成，但是由于CSS还在获取，所以不能立即执行。

而第二个<script>不能立即执行，导致它后面的p标签也没办法解析，原因则是JS会阻塞DOM解析。只有等待到CSS样式获取成功后，此时JS立即执行，控制台输出null，然后浏览器继续解析到p标签，解析完成，DOMContentLoaded事件触发，控制台输出p标签，最后浅蓝色hello world渲染至页面。

其实这样做也是有道理的，设想JS脚本中的内容是获取DOM元素的CSS样式属性，如果JS想要获取到DOM最新的正确的样式，势必需要所有的CSS加载完成，否则获取的样式可能是错误或者不是最新的。因此要等到JS脚本前面的CSS加载完成，JS才能再执行，并且不管JS脚本中是否获取DOM元素的样式，浏览器都要这样做。