前端的虚拟DOM

一、浏览器的组成
用户界面：包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分。
浏览器引擎： 在用户界面和呈现引擎之间传送指令，查询与操作渲染引擎的接口。负责窗口管理，tab进程管理。
渲染引擎：有叫内核，负责HTML解析，页面渲染。 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
JS解释器/js引擎： 用于解析执行JavaScript代码，用于解析和执行 JavaScript 代码。如Chrome和Node采用的是V8.
数据存储：这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
网络：用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现。
UI后端 ：绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现。

二、浏览器渲染引擎的工作流程
浏览器的核心是两部分：渲染引擎和JavaScript解释器（又称JavaScript引擎）。最开始渲染引擎和js引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。我们知道HTML是由标签组成的，标签套标签。JavaScript可以通过DOM获取到底有哪些标签，标签里面的属性是什么，内容是什么等等…
渲染引擎
代码===》》平面文档。
渲染引擎的主要作用是，将网页从代码“渲染”为用户视觉上可以感知的平面文档。渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具。不同的浏览器有不同的渲染引擎。

渲染引擎工作流程
1、HTML解析器将HTML文档构建为DOM树。
2、利用CSS分析器来渲染树结构，使树具有视觉效果。
3、布局渲染树（为每个节点分配固定坐标）。
4、绘制DOM树（渲染引擎会遍历所有的节点，由UI后端绘制）。
三、JS操作真实DOM的代价
用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。
在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。
四、为什么需要虚拟DOM，它有什么好处？
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。虚拟DOM本质上就是一个JS对象。
如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
五、在Vue是数据渲染中就使用到了虚拟DOM