jsp个人网站设计,北京网站建设哪家专业,天津关键词优化平台,软件开发培训机构找极客时间1、什么是虚拟DOM
虚拟DOM 是javascript的一个对象#xff0c;是内存中的一种数据结构#xff0c;以树的形式存储UI的状态#xff0c;树中的每个节点都代表着真实的DOM#xff0c;用来描述我们希望在页面看到的 HTML结构#xff1b; 现在的MVVM 框架#xff0c;大多使用…1、什么是虚拟DOM
虚拟DOM 是javascript的一个对象是内存中的一种数据结构以树的形式存储UI的状态树中的每个节点都代表着真实的DOM用来描述我们希望在页面看到的 HTML结构 现在的MVVM 框架大多使用虚拟DOM进行数据视图的更新相比较真实DOM的操作 操作真实DOM时 DOM属性繁多处理增删改成比较繁琐处理效率低会出现重绘回流现象导致页面更新缓缓卡顿
原生的DOM也是 js的一个对象只不过是浏览器提供的对象 比如在JSX 中写法 const dom h1/h1
// 对应虚拟DOM
const dom {type: h1}
const dom document.createElement(h1)
-------
const dom div classNamenameAndy/div
// 对应的虚拟DOM为
dom {type: div, props:{ className: name, children:Andy}}2、虚拟DOM的用途作用
虚拟DOM主要是为了提升操作更新界面的效率目前前端流行的前端框架React Vue都是使用虚拟DOM进行更新但是在一些对于性能要求极高画面绘制精细的应用中虚拟DOM依然无法满足需求需要使用更加低级的渲染技术如WebGL 或者直接操作DOM
主要流程
创建虚拟DOM树将UI组件转化为虚拟DOM树来表示UI结构 A、Diffing算法 每次更新属性状态时候会新创建一个虚拟DOM树并与之前的虚拟DOM树进行对比找出差异 B、最小范围更新 通过 Diffing 算法React 确定需要更新的 DOM 节点并只对发生变化的部分进行更新 C、渲染更新 React 根据 Diffing 结果对真实 DOM 进行最小化的更新操作。
3、React 通过Diff 算法如何进行 current process 与 workInProcess 对比的以及16.8前后版本性能的对比
虚拟DOM的 Diffing 算法是 React 的优化性能核心通过启发式算法来对比两颗虚拟的 DOM树最大限度减少对比的计算量
同层节点对比 React 只会比较同层的节点不会跨层对比不同层次的节点。也就是说如果元素的位置发生了变化React 会先删除原来的节点再插入新的节点。
唯一 key 标识 在处理动态列表时React 通过 key 属性来区分不同的节点。如果列表中的每个元素都有一个唯一的 keyReact 就能高效地找到变化的元素并只更新该部分。
在React 15之前使用的是递归创建虚拟DOM递归不能中断如果层级很深多导致递归线程占用时间长阻塞主线程而导致出现卡顿现象 在 React 16之后为了处理这种不能中断的方式将更新方案修改为异步的可中断方案推出Fiber架构将任务切片分隔异步渲染根据不同的需求分配不同的优先级进行渲染支持分批次批量更新 vue2中使用的是双端对比即分别一个从头开始一个从末尾开始向中间对比靠拢在递归的同时会对DOM进行操作
而React认为实际应用中对于列表翻转大量重绘重排场景比较少而是采用双缓存的技术在React的进程中最多会同时存在两个Fiber树当前屏幕看到渲染出来的视图树称为 current fiber树正在缓存中进行状态属性处理的 树称为 workInProcess fiber树当 workInProcess fiber 树渲染完成后应用根节点的 current 指针会指向 workInProcess fiber 树从而将 workInProcess fiber树更改为 current fiber 树完成一次视图更新渲染
React 的更新会经历两个阶段render 阶段 和 commit 阶段。render 阶段是可中断的commit 阶段是不可中断的。
render 阶段会生成 fiber 树所谓的 diff 就会发生在这个阶段。React 通过深度优先遍历来生成 fiber 树整个过程与递归是类似的因此生成 fiber 树的过程又可以分为「递」阶段和「归」阶段。
commit 阶段主要执行各种 DOM 操作、生命周期钩子、某些 hook 等。
因此diff 阶段不会直接变更 DOM而是留到 commit 阶段再做变更
4、虚拟DOM 对比时候的 注意事项key
如果列表只是简单的展示没有增删改查操作可以使用index作为key值相反则key值需要是唯一的否则会使新旧DOM对比时候消耗更多的性能 如图key 唯一时候key 使用index 时候图像对比
使用index 作为key 时候如下图 使用 唯一标识 作为key 时候
