如何理解 Svelte “无需虚拟 DOM”

[leochenliu]

Svelte “无需虚拟 DOM”

想象一下，你有一本非常特别的涂色书，这本涂色书代表了网页上的一个页面。在这个故事中，我们将比较两种不同的涂色方法，来理解“无需虚拟 DOM”的概念。

方法一：使用“魔法涂色板”（虚拟 DOM ） 首先，想象你在使用一块特别的“魔法涂色板”。每当你想要给你的涂色书上的图画涂色时，你首先在这块“魔法涂色板”上练习涂色。这块涂色板很特别，它可以帮助你计划出最好的涂色方式，然后一次性把所有的颜色变化应用到你的涂色书上。

这就像是使用虚拟 DOM 的框架（比如 React ）。开发者先在虚拟 DOM 上做出所有的改变，然后框架计算出最有效率的方式来更新实际的网页（你的涂色书）。

方法二：直接在涂色书上涂色（ Svelte 的方式） 现在，想象另一种方法。这次，你直接在涂色书上涂色，每次想改变颜色时，你就直接在书上对应的地方涂上新颜色。没有中间的“魔法涂色板”，所有的变化都是直接和即时发生的。

这就是 Svelte 的工作方式。它不需要一个中间的“魔法涂色板”（即虚拟 DOM ）来计划改变。相反，它直接更新实际的网页，这样可以更快，因为它减少了额外的步骤。

总结 所以，当人们说 Svelte “无需虚拟 DOM”时，他们的意思是 Svelte 可以直接快速地更新网页，就像孩子直接在涂色书上涂色一样，不需要通过一个额外的步骤（即“魔法涂色板”）来计划和优化这些变化。这使得整个过程更直接、更快速。

[Dragonphy]

最近 Vue 在写 Vapor Mode ，可以看看 https://github.com/vuejs/core-vapor

[june4]

我更喜欢的 solid-js 也是这个模式

[kneo]

一个技术词汇理解还得编这么一大段故事，好累啊。真的不这样就看不懂吗？

[siweipancc]

乱七八糟的，面向 ppt 推广，只会吸引到圈外人

[CHTuring]

@siweipancc
有一说一，这不算是 ppt 推广。
Svelte 和 Solid 在营销页和活动页这些确实很方便，在国外还是有点市场的。

[CHTuring]

喜欢 Vue 写法的可以试试 Svelte ，更快更好
喜欢 React 写法的可以是试试 Solid ，灵活轻便
特别是在 Astro 里面用，都是无虚拟 DOM ，搭配上部份 Node 服务的功能，做轻快的页面很舒服。

[Yuanlaoer]

不就是“计算增量”么，再罗嗦点，“只对产生变化的部分做处理”
围绕虚拟 DOM 讲这么多，说是给新手看吧，明显是引入了更多概念；说是给老手看把，又非要举涂色书的例子。

框架放一边，这种讲述方式我只想打 0 分

[Perry]

这是 LLM 的回答么？同意楼上，用多了 React 的自然知道 virtual DOM 的优势和劣势，Svelte 并没有很牛逼，算是一种返祖现象。

[whistleryz]

VDOM 渲染性能是否存在很大的问题这个还是得分场景看，搞个不同维度 benchmark ，用数据说话。

此外，VDOM 还一定程度支持了跨端开发的能力，这对块，即使性能有损，也会有很大的适用场景

[whistleryz]

另外你的这个描述看起来是想说类 Svelte 和类 React 实现局部更新或者增量渲染的区别

VDOM 实现局部更新或者增量渲染是通过 diff 找到的脏区;

所谓无需 VDOM ，那看起来就是通过标脏的方式实现的;

技术方案无所谓优劣，还是要看具体使用场景

[MetroWind]

用就完了，没什么好理解的~~

[renmu]

jQuery 天下第一🐶

[dcoder]

你们前端以为 React/Vue 就是尽头了吗?
Too young! 我们后端扶你们起来继续学!! 哈哈哈

[siweipancc]

@CHTuring 我会写这玩意，但我看不懂你的描述。那么问题来了，你这描述究竟想达到什么效果？

[jaywhen]

“ JavaScript 的各种“WEB 框架”，层出不穷，似乎一直在推陈出新，而其实呢，全都是在黑暗里瞎蒙乱撞。JavaScript 的社区以幼稚和愚昧著称。你经常发现一些非常基本的常识，被 JavaScript“专家”们当成了不起的发现似的，在大会上宣讲。我看不出来 JavaScript 社区开那些会议，到底有什么意义，仿佛只是为了拉关系找工作。” ——王垠《给 Java 说句公道话》 https://www.yinwang.org/blog-cn/2016/01/18/java

（保命叠甲 ps. 我是前端，我爱 JavaScript ，引用段落不代表我的观点）

[coderpwh]

这个描述不太直观，本质就是 Svelte 把 dom 的操作工作在编译时就生成了代码，vue 这些加了一层抽象，在运行时还是依赖虚拟 dom 在操作

[yc8332]

前端是没事干吗？一天天出新名词，搞花活。

[mandex]

我用 jQuery 我是土包子

[daolanfler]

这比喻太抽象了，下面 GPT 说的更清楚：
Svelte 是一种现代的 JavaScript 框架，与其他前端框架（如 React 、Vue 等）不同，它不使用虚拟 DOM （ Virtual DOM ）来更新用户界面。理解 Svelte 不需要虚拟 DOM 需要涉及以下几个方面：

1. **编译时（ Compile-time ）操作：** Svelte 的独特之处在于，它在构建时将组件的代码转换成高效的 JavaScript ，而不是在运行时操作虚拟 DOM 。这种编译时的处理可以减少运行时的开销，因为在传递给浏览器之前，就已经进行了很多优化。

2. **组件代码转换为原生 JavaScript：** 在 Svelte 中，组件的代码会在构建时转换为原生的 JavaScript 。这样，不需要在浏览器中运行时维护虚拟 DOM ，减少了运行时的内存和性能开销。

3. **没有运行时框架：** 与其他框架不同，Svelte 在运行时不需要框架本身的支持。它生成的 JavaScript 代码包含了构建时的所有逻辑，因此不需要额外的运行时库来处理虚拟 DOM 操作。

4. **直接操作 DOM 元素：** Svelte 组件中的代码直接操作真实的 DOM 元素，而不是通过虚拟 DOM 进行中间层的抽象。这使得在更新界面时能够更直接、高效地操作实际的 DOM 元素。

5. **优化的更新策略：** Svelte 通过跟踪组件的状态变化来确定哪些部分需要更新，而不是通过比较虚拟 DOM 树来进行差异检测。这种优化的更新策略可以减少不必要的 DOM 操作，提高性能。

总体而言，Svelte 的设计理念是通过在构建时进行更多的工作，以减少在运行时的工作负担，提供更高效的性能。这种方式不需要虚拟 DOM ，使得 Svelte 在性能方面具有一些优势。

[lete]

我的观点，欢迎各位大佬评价+指正 https://blog.imlete.cn/article/Virtual-DOM-slower-real-DOM.html