前沿
- 虚拟dom这个东东其实我之前也不知道,之前一直以为是因为vue等的这些mvvm框架就是因为数据驱动页面,减少了大量的dom操作,所以才会性能更好。
- 知道又一次去面试,面试官问到知道为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快么?我回答的就是第一条,他说不全是,不过最后还是跟我说了,回去了解一下虚拟dom
- 所以才回去就赶紧看了看,现在有空,赶紧整理出来
- 如果后期能理解更深,会持续更新的。
我也是了解之后才发现vue官网中有提出虚拟dom的概念,只不过是自己没有当回事罢了。
什么是虚拟dom
-
文档对象模型或DOM定义了一个接口,该接口允许JavaScript之类的语言访问和操作HTML文档。元素由树中的节点
表示,并且接口允许我们操纵它们。但是此接口需要付出代价,大量非常频繁的DOM操作会使页面速度变慢 -
每个元素都是一个节点,每段文字也是一个节点,一个节点就是页面的额一部分,就像家谱一样,每个节点都有孩子节点。
-
虚拟dom就是为了解决操作真是dom带来的性能问题而出现的,所以说,
-
虚拟dom就是用js对象模拟真实的dom节点,也就是将所有的更新dom的操作先全部反映在js对象上(虚拟dom上)
-
操作内存中的js对象显然速度要快很多,等更新完成后,再将最终的js对象映射到真是的dom上,交由浏览器去绘制页面。
-
上边所说的js对象模拟真实的dom节点也就是官网中所说的(虚拟节点VNode.)
看看官网怎么说
-
也就是这个原理大大提高了渲染速度。