• 虚拟DOM和实际的DOM有何不同?


    DOM的缺陷有哪些?
    • 牵一发而动全身(频繁操作DOM)
    • 每次操作DOM,渲染引擎都需要进行重排、重绘或者合成等操作
    • 对于 DOM 的不当操作还有可能引发强制同步布局和布局抖动的问题
    • 大大降低渲染效率
    虚拟 DOM 要解决哪些事情?
    • 将页面改变的内容应用到虚拟 DOM 上,而不是直接应用到 DOM 上
    • 虚拟 DOM 并不急着去渲染页面,而仅仅是调整虚拟DOM 的内部状态
    • 在虚拟 DOM 收集到足够的改变时,再把这些变化一次性应用到真实的 DOM 上。
    虚拟DOM执行流程是什么?

    创建阶段:首先依据 JSX 和基础数据创建出来虚拟 DOM,它反映了真实的 DOM 树的结构。然后由虚拟 DOM 树创建出真实 DOM 树,真实的 DOM 树生成完后,再触发渲染流水线往屏幕输出页面。

    更新阶段:如果数据发生了改变,那么就需要根据新的数据创建一个新的虚拟 DOM树;然后 React 比较两个树,找出变化的地方,并把变化的地方一次性更新到真实的DOM 树上;最后渲染引擎更新渲染流水线,并生成新的页面。

    虚拟DOM都解决了哪些问题?
    • 频繁更新DOM引起的性能问题
    • 将真实DOM和js操作解耦,减少js操作dom复杂性。
    虚拟DOM是如何解决这些缺陷的?

    当有数据更新时,React 会生成一个新的虚拟 DOM,然后拿新的虚拟 DOM和之前的虚拟 DOM 进行比较(比较两个虚拟 DOM 的过程是在一个递归函数里执行的,其核心算法是 reconciliation),这个过程会找出变化的节点,然后再将变化的节点应用到DOM 上。通常情况下,这个比较过程执行得很快,不过当虚拟 DOM 比较复杂的时候,执行比较函数就有可能占据主线程比较久的时间,这样就会导致其他任务的等待,造成页面卡顿,这时,React 团队重写了reconciliation 算法,新的算法称为 Fiber reconciler,就是在执行算法的过程中出让主线程,这样就解决了 Stack reconciler 函数占用时间过久的问题。

    虚拟DOM从双缓存和 MVC 角度又是怎样的?

    双缓存是一种经典的思路,应用在很多场合,能解决页面无效刷新和闪屏的问题,虚拟 DOM 就是双缓存思想的一种体现。而基于 MVC 的设计思想也广泛地渗透到各种场合,并且基于 MVC 又衍生出了很多其他模式(如 MVP、MVVM 等),不过万变不离其宗,它们的基础骨架都是基于 MVC 而来,例如React,可以把它的虚拟DOM看成是MVC的视图部分,其控制器和模型都是由Redux 提供的。具体实现过程:

    基于React、Redux构建的MVC模型:

    • 控制器是用来监控 DOM 的变化,一旦 DOM 发生变化,控制器便会通知模型,让其更新数据

    • 模型数据更新好之后,控制器会通知视图,告诉它模型的数据发生了变化;

    • 视图接收到更新消息之后,会根据模型所提供的数据来生成新的虚拟 DOM;

    • 新的虚拟 DOM 生成好之后,就需要与之前的虚拟 DOM 进行比较,找出变化的节点;

    • 比较出变化的节点之后,React 将变化的虚拟节点应用到 DOM 上,这样就会触发 DOM节点的更新;

    • DOM 节点的变化又会触发后续一系列渲染流水线的变化,从而实现页面的更新。

  • 相关阅读:
    iOS开发——keychain的使用
    iOS开发——策略模式
    iOS开发——MVC模式
    iOS开发——代理模式
    ExtjsCode_Test02Panel.js
    网站收藏
    关于ExtJs Form表单的赋值、获取、重置
    ExtJS分页start,limit,pageSize的研究
    使Grid可编辑
    如何禁用Grid中的ToolBar中的Button
  • 原文地址:https://www.cnblogs.com/zppsakura/p/14056878.html
Copyright © 2020-2023  润新知