首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >Solid >Solid 为什么不使用虚拟 DOM?

Solid 为什么不使用虚拟 DOM?

词条归属:Solid

1. 虚拟 DOM 的代价

虚拟 DOM 需要为每次渲染构建一棵内存中的节点树,并与旧树进行差异比对,再将差异应用到真实 DOM。这一过程本身会消耗 CPU 和内存,在高频更新场景下尤为明显。

2. 编译期即可确定 DOM 结构

Solid 认为,借助编译器在构建阶段就能确定 JSX 对应的真实 DOM 结构,运行时再走一遍"虚拟 DOM + diff"属于重复劳动。因此它选择把 DOM 结构在编译期固化,运行时直接操作真实节点。

3. 细粒度更新替代整体 diff

通过信号驱动的依赖追踪,Solid 在更新时已经明确知道"哪些节点需要改",无需通过 diff 去"找出"变化。这从根本上省去了 diff 环节,同时保证更新粒度更细。

4. 性能与体积收益

去掉虚拟 DOM 后,Solid 的核心运行时体积大幅缩小(gzip 后约 7.6 KB),并在主流性能基准测试中长期位居第一梯队,渲染与内存占用表现接近原生 JavaScript。

相关文章
增量 DOM 与虚拟 DOM 的对比使用
如果你熟悉 React,你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。
桃翁
2021-01-13
2.2K0
React篇(010)-为什么虚拟 dom 会提高性能?
答案: 虚拟dom(virtual dom) 其实就是一个JavaScript对象,通过这个JavaScript对象来描述真实dom。 真实dom:以前没有虚拟dom,如果需要比较两个页面的差异,我们需要通过对真实dom进行比对。真实dom节点是非常复杂的,它里面会绑定的事件,它会有属性,背后会有各种方法,会频繁触发重排与重绘,所以两个真实dom比对,非常耗性能。 总损耗 = 真实DOM完全增删改 + (可能较多的节点)重排与重绘 虚拟dom:相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提髙性能。 总损耗 = 虚拟DOM增删改 + (与Diff算法效率有关)真实DOM差异增删改 + (较少的节点)重排与重绘 具体实现步骤如下: 1. 用JavaScript对象结构表示DOM树的结构;然后用这个树构建一个真正的DOM树,插到文档当中; 2. 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异; 3. 把步骤2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了。
齐丶先丶森
2022-05-12
7210
【React】归纳篇(二)JSX使用与虚拟DOM
若对虚拟DOM想进一步了解,可查看另一篇文章《浅析虚拟DOM》 点击查看《浅析虚拟DOM》
前端修罗场
2023-10-07
5720
为什么不推荐使用PHPicker
iOS 14 中系统新增了一个图片选择器 PHPicker,官方建议使用 PHPicker 来替代原有的 API 进行图片选择,下面我们来看看 PHPicker 的优点:
ios-lan
2020-10-23
4.3K0
MySQL为什么不推荐使用in
当然,每个具体的情况都是不同的,所以在选择查询操作符时,我们需要根据具体的需求和数据情况进行评估和测试。在优化查询性能时,我们可以使用MySQL的查询分析工具来帮助我们理解查询的执行计划和性能瓶颈,从而做出更好的决策。
程序员朱永胜
2023-09-07
2.7K0
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券