前端开发离不开界面,界面玩的就是数据和视图(DOM),数据驱动视图(DOM)。
DOM操作频繁必然会耗费性能,但操作DOM又是避免不了的,只能尽可能减少对DOM的操作。
利于JS计算性能,在初次渲染DOM的时候,同时用JS描述一份虚拟DOM,当数据发生变化时,通过查询对比虚拟DOM的方式,一次性找出所有要修改的真实DOM节点进行修改。
如果没有虚拟DOM,举个例子,当一个数据发生变化,对应的要更新视图中10处DOM节点,传统的做法,浏览器收到第一个DOM请求后并不知道还有9次更新操作,因此会马上执行流程,最终执行10次。而每一次的更新必然会操作DOM,并且引起回流,造成性能消耗。
虚拟DOM的意义,就是不会立即操作真实DOM,而是更新虚拟DOM,因为虚拟DOM是用JS描绘的对象,所以不会对性能造成太大损耗,更新完虚拟DOM后,再一次性渲染成真实的DOM,也就是从前到后浏览器只需要绘制一次。
快速扫描下方二维码 免费加入前端技术交流群