为什么用虚拟 DOM(Virtual DOM)?

19 阅读1分钟

保证性能下限,在不进行手动优化的情况下,提供过得去的性能。

  • 页面渲染的流程:解析 HTML --> 生成 DOM --> 生成 CSSDOM --> Layout --> Paint --> Compiler

  • 修改 DOM 时,真实 DOM 操作和 虚拟 DOM 的过程及重排重绘的性能消耗:

    • 真实 DON:生成 HTML 字符串 + 重建所有的 DOM 元素。
    • 虚拟 DOM:生成 VNode + DOMDiff + 必要的 DOM 更新。
    • 虚拟 DOM 的更新:DOM 的准备工作耗费更多的时间,也就是 JS 层面相比更多的 DOM 操作,JS 的消费是极其便宜的

框架保证的是,你不需要手动优化的情况下,依然可以给你提供过得去的性能。

跨平台 Virtual DOM 本质是 JS 对象,可以很方便的跨平台操作,比如服务器渲染、uniapp等