不懂就要问，浏览器到底是什么时候更新dom？

Z时代
2024-01-10
分类：技术分享

求大佬拯救我
相信很多人看过这段话：
浏览器内核是多线程的，其中一个常驻线程叫javascript引擎线程，负责执行js代码，还有一个常驻线程叫GUI渲染线程，负责页面渲染，dom重画等操作。javascript引擎是基于事件驱动单线程执行的，js线程一直在等待着任务列表中的任务到来，而js线程与gui渲染线程是互斥的，当js线程执行时，渲染线程呈挂起状态，只有当js线程空闲时渲染线程才会执行。

下面有我的三段测试代码：

document.querySelector('body').innerHTML = Math.random()
console.log(document.querySelector('body').innerHTML)
var time = new Date().valueOf()
while(new Date().valueOf() - time < 2000) {}// console是最新的随机数，页面2秒后更新

document.querySelector('body').innerHTML = Math.random()
console.log(document.querySelector('body').innerHTML)
Promise.resolve().then(()=>{
var time = new Date().valueOf()
while(new Date().valueOf() - time < 2000) {}
})// console是最新的随机数，页面2秒后更新

document.querySelector('body').innerHTML = Math.random()
console.log(document.querySelector('body').innerHTML)
setTimeout(()=>{
var time = new Date().valueOf()
while(new Date().valueOf() - time < 2000) {}
}, 1)// console是最新的随机数，页面2秒后更新

document.querySelector('body').innerHTML = Math.random()
console.log(document.querySelector('body').innerHTML)
setTimeout(()=>{
var time = new Date().valueOf()
while(new Date().valueOf() - time < 2000) {}
}, 100)// console是最新的随机数，页面立刻更新

我的问题是：
dom什么时候更新？
同步代码和微任务执行完更新？好像不是。
js线程空闲的时候更新？好像是，那么什么时候算是js线程空闲？

回答

DOM结构的修改是同步完成的，dom的实际效果修改或者说渲染是异步的，个人认为是同步js代码执行完毕和异步队列执行之前的中间段进行更新

document.querySelector('body').innerHTML = Math.random()
console.log(document.querySelector('body').innerHTML) 
var time = new Date().valueOf()while(new Date().valueOf() - time < 2000) {}

这个的测试结果，调用栈空了在执行dom update,在下图的5500ms分界线。

这时候你会有个疑问说，为什么console.log先输出了。首先document.querySelector('body').innerHTML = Math.random()
console.log(document.querySelector('body').innerHTML) 你调用这个的时候，dom确实是已经改变了(我觉得可以简单理解为，dom对象数据已经改变，所以可以读出来)，但是dom的改变不是说dom已经更新在界面了，这是两个概念，dom更新到页面上是要经过ui render之后；这个是render是在5500ms处，就是说等你的调用栈空了在去render的。因为js线程与gui渲染线程是互斥的
其他的你可以在chrome performance自己慢慢验证，