为什么操作dom比较耗时

发布时间 2023-08-09 15:19:00作者: 柯蓝僧人

为甚操作dom比较耗时

以前只知道操作dom比较耗时,但是不知道为什么,也没有去深究,今天知道了为什么记录一下

这个问题应该是有上下文的

操作dom比较耗时,应该是相对于普通js操作,操作dom比较耗时,上一段代码比较有说服力

const times = 1000000
console.time('js')
let body = document.body
for(let i = 0;i < times;i++) {
    let tmp = body
}
console.timeEnd('js')
console.time('dom')
for(let i = 0;i < times;i++) {
    let tmp = document.body
}
console.timeEnd('dom')

那么为什么呢
直觉是dom比较大


不过不只如此

浏览器的架构

浏览器是多进程架构,其中里面有两个重要的线程, js 引擎,渲染引擎, js引擎负责执行js
代码, 渲染引擎负责渲染页面信息,html 转化成dom树, css转化成cssom树, 然后合成成render树,
渲染引擎把合成的树渲染成页面,当然这个过程也非常复杂,其中有很多细节,感兴趣的可以去
search一下。

js引擎和渲染引擎是互斥的,就是同一时刻,他俩只能有一个人干活,因为如果他俩
同时干活,同时操作dom, 会导致页面不一致。浏览器为了方式造成死锁,采用了单线程
这两个线程同一时刻,只能有一个线程在执行

铺垫了这么多, 可以说说为什么操作dom耗时了,还得在铺垫一下
操作系统调用一个线程的时候, 需要保存当前线程的执行状态(当前线程的上下文呢),然后读取下一个线程的
上下文,从js引擎执行到渲染引擎执行,必然会有执行上下文切换这个操作,频繁的操作dom,渲染页面
必然会导致频繁的上下文切换。所以操作dom比较耗时。