想必大家都听过操作 DOM 性能很差,但是这其中的原因是什么呢?
- 因为
DOM
是属于渲染引擎中的东西,而JS
又是JS
引擎中的东西。当我们通过JS
操作DOM
的时候,其实这个操作涉及到了两个线程之间的通信,那么势必会带来一些性能上的损耗。操作DOM
次数一多,也就等同于一直在进行线程之间的通信,并且操作DOM
可能还会带来重绘回流的情况,所以也就导致了性能上的问题。
经典面试题:插入几万个
DOM
,如何实现页面不卡顿?
- 对于这道题目来说,首先我们肯定不能一次性把几万个
DOM
全部插入,这样肯定会造成卡顿,所以解决问题的重点应该是如何分批次部分渲染DOM
。大部分人应该可以想到通过requestAnimationFrame
的方式去循环的插入DOM
,其实还有种方式去解决这个问题:虚拟滚动(virtualized scroller
)。 - 这种技术的原理就是只渲染可视区域内的内容,非可见区域的那就完全不渲染了,当用户在滚动的时候就实时去替换渲染的内容
从上图中我们可以发现,即使列表很长,但是渲染的
DOM
元素永远只有那么几个,当我们滚动页面的时候就会实时去更新DOM
,这个技术就能顺利解决这道经典面试题