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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery 天下第一🐶

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

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

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

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

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

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

我用 jQuery 我是土包子

这比喻太抽象了，下面 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 在性能方面具有一些优势。

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

简单来说，Svelte 是编译执行，Vue/React 是解释执行。