浏览器加载一个HTML文件的大致流程:
1.构建DOM树
2.构建Style Rules,页面的样式表
3.把DOM树和样式表综合起来,形成Render Tree
4.布局,为每个Render树上的节点确定在显示屏上出现的精确坐标值。
5.绘制,调用每个节点的paint方法
JS操作真实DOM的代价
传统的开发模式,原生JS或者JQ操作DOM时,浏览器会从构建DOM树从头到位的执行一边流程,如果我们用循环更新10个DOM节点,浏览器会从第一个dom请求开始执行,连续对DOM进行9次的更新请求,直到执行10次,浪费性能的同时也容易导致页面卡顿,影响用户体验,频繁且复杂的dom操作通常是前端性能瓶颈的产生点,Vue提供了虚拟dom的解决办法。
虚拟DOM的核心思想:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许过于抽象,却基本概括了虚拟DOM的设计思想。
- 提供一种方便的工具,使得开发效率得到保证
- 保证最小化的DOM操作,使得执行效率得到保证
也就是说,虚拟dom的框架/工具都是这么做的:
- 根据虚拟dom树最初渲染成真实dom。
- 当数据变化,或者说是页面需要重新渲染的时候,会重新生成一个新的完整的虚拟dom。
- 拿新的虚拟dom来和旧的虚拟dom做对比(使用diff算法),得到需要更新的地方之后,再更新内容。
这样的