Virtual DOM

• 改变页面内容（用户或系统完成的各种动作引起的响应数据模型中的变化）只能通过遍历查询 dom 树，修改 dom、样式行为、结构，来更新 ui

• 消耗计算资源：每次查询 dom 几乎都需要遍历整颗 dom 树

• 建立一个与 dom 树对应的虚拟 dom 对象（轻量级的 JavaScript 对象），以对象嵌套的方式来表示 dom 树及其层级结构

  • 将元素的属性和内容作为对象及其属性

• 每次 dom 的更改就变成了对 js 对象的属性的增删改查

• React 的渲染函数从 React 组件中创建一个节点树

为什么操作真实DOM的成本比较高？

• dom 树的实现模块和 js 模块是分开的，跨模块的通讯增加了成本

• dom 操作引起的浏览器的回流和重绘

• pc 端是没有性能问题的，因为 pc端的计算能力强，而手机的性能参差不齐，会有性能问题

浏览器收到一个html页面是如何解析成页面呈现给用户的呢？

• 边按顺序解析html 边构建 dom树

  • 浏览器有专门的html解析器来解析HTML，并在解析的过程中构建DOM树

• 构建 renderTree：将样式css应用到dom节点上

• 布局：递归计算呈现树节点的大小和位置

• 绘制：将呈现树绘制出来显示在屏幕上

  • www.cnblogs.com/dojo-lzz/p/…

步骤

• 底层数据改变 → 整个 UI 都将在 Virtual DOM 描述中重新渲染

• 计算 DOM 之间的差异

• 只用实际更改的内容更新 real DOM

区分Real DOM和Virtual DOM

Real DOM

文档对象模型，在页面渲染出的每一个结点都是一个真实DOM结构

• 更新缓慢

• 可以直接更新 HTML

• 如果元素更新，则创建新 DOM

• DOM操作代价很高

• 消耗的内存较多

Virtual DOM

以 JavaScript 对象形式存在的对 DOM 的描述

• 更新更快

• 无法直接更新 HTML

• 如果元素更新，则更新 JSX

• DOM 操作非常简单

• 很少的内存消耗