为什么操作DOM是缓慢/耗性能的?笔者在学习前端技术的过程中,经常会看到这样的论调,也对其原因产生了好奇
后来到网上查阅原因,在知乎上发现了这样一篇回答:
https://www.zhihu.com/question/324992717/answer/690011952
笔者觉得有必要将这个问题略记一二
在这篇回答中,作者提出操作DOM耗性能主要有两个原因:
reason 1
浏览器的js引擎和dom引擎共享一个主线程,一个dom api的调用会经过以下过程:
将js数据结构转为dom数据结构,再挂起js引擎并启动dom引擎,执行过后再把可能的返回值反转数据结构,重启js引擎继续执行
这样的上下文切换很耗性能
reason 2
很多dom api的读写都涉及页面布局的重新计算,以确保返回值的准确,涉及样式、结构的改变还会触发页面重新绘制(重绘/重排),更耗性能
综上,dom api的调用本身比较耗性能,在频繁调用的情况下其性能消耗会大幅积累,dom引擎会占用主线程过久,用户操作时,js事件回调不能及时响应,就会使用户感到页面卡顿