推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 323 天前的主题，其中的信息可能已经有所发展或是发生改变。
Svelte “无需虚拟 DOM”
想象一下，你有一本非常特别的涂色书，这本涂色书代表了网页上的一个页面。在这个故事中，我们将比较两种不同的涂色方法，来理解“无需虚拟 DOM”的概念。
方法一：使用“魔法涂色板”（虚拟 DOM ） 首先，想象你在使用一块特别的“魔法涂色板”。每当你想要给你的涂色书上的图画涂色时，你首先在这块“魔法涂色板”上练习涂色。这块涂色板很特别，它可以帮助你计划出最好的涂色方式，然后一次性把所有的颜色变化应用到你的涂色书上。
这就像是使用虚拟 DOM 的框架（比如 React ）。开发者先在虚拟 DOM 上做出所有的改变，然后框架计算出最有效率的方式来更新实际的网页（你的涂色书）。
方法二：直接在涂色书上涂色（ Svelte 的方式） 现在，想象另一种方法。这次，你直接在涂色书上涂色，每次想改变颜色时，你就直接在书上对应的地方涂上新颜色。没有中间的“魔法涂色板”，所有的变化都是直接和即时发生的。
这就是 Svelte 的工作方式。它不需要一个中间的“魔法涂色板”（即虚拟 DOM ）来计划改变。相反，它直接更新实际的网页，这样可以更快，因为它减少了额外的步骤。
总结 所以，当人们说 Svelte “无需虚拟 DOM”时，他们的意思是 Svelte 可以直接快速地更新网页，就像孩子直接在涂色书上涂色一样，不需要通过一个额外的步骤（即“魔法涂色板”）来计划和优化这些变化。这使得整个过程更直接、更快速。
 |
1
Dragonphy 323 天前
最近 Vue 在写 Vapor Mode ，可以看看 https://github.com/vuejs/core-vapor
|
 |
2
june4 323 天前
我更喜欢的 solid-js 也是这个模式
|
 |
3
kneo 323 天前 via Android
一个技术词汇理解还得编这么一大段故事，好累啊。真的不这样就看不懂吗？
|
 |
4
siweipancc 323 天前 via iPhone
乱七八糟的，面向 ppt 推广，只会吸引到圈外人
|
 |
5
CHTuring 323 天前
|
|
6
CHTuring 323 天前
喜欢 Vue 写法的可以试试 Svelte ，更快更好
喜欢 React 写法的可以是试试 Solid ，灵活轻便 特别是在 Astro 里面用，都是无虚拟 DOM ，搭配上部份 Node 服务的功能，做轻快的页面很舒服。 |
 |
7
Yuanlaoer 323 天前
不就是“计算增量”么，再罗嗦点，“只对产生变化的部分做处理”
围绕虚拟 DOM 讲这么多，说是给新手看吧，明显是引入了更多概念；说是给老手看把，又非要举涂色书的例子。 框架放一边，这种讲述方式我只想打 0 分 |
 |
8
Perry 323 天前 via iPhone  1
这是 LLM 的回答么？同意楼上，用多了 React 的自然知道 virtual DOM 的优势和劣势，Svelte 并没有很牛逼，算是一种返祖现象。
|
 |
9
whistleryz 323 天前 via iPhone
VDOM 渲染性能是否存在很大的问题这个还是得分场景看，搞个不同维度 benchmark ，用数据说话。
此外，VDOM 还一定程度支持了跨端开发的能力，这对块，即使性能有损，也会有很大的适用场景 |
|
10
whistleryz 323 天前 via iPhone
另外你的这个描述看起来是想说类 Svelte 和类 React 实现局部更新或者增量渲染的区别
VDOM 实现局部更新或者增量渲染是通过 diff 找到的脏区; 所谓无需 VDOM ，那看起来就是通过标脏的方式实现的; 技术方案无所谓优劣，还是要看具体使用场景 |
 |
11
MetroWind 323 天前
用就完了，没什么好理解的~~
|
 |
12
renmu 323 天前 via Android
jQuery 天下第一🐶
|
 |
13
dcoder 323 天前
你们前端以为 React/Vue 就是尽头了吗?
Too young! 我们后端扶你们起来继续学!! 哈哈哈 |
|
14
siweipancc 323 天前 via iPhone
@CHTuring 我会写这玩意，但我看不懂你的描述。那么问题来了，你这描述究竟想达到什么效果？
|
 |
15
jaywhen 323 天前 via iPhone 1
“ JavaScript 的各种“WEB 框架”，层出不穷，似乎一直在推陈出新，而其实呢，全都是在黑暗里瞎蒙乱撞。JavaScript 的社区以幼稚和愚昧著称。你经常发现一些非常基本的常识，被 JavaScript“专家”们当成了不起的发现似的，在大会上宣讲。我看不出来 JavaScript 社区开那些会议，到底有什么意义，仿佛只是为了拉关系找工作。” ——王垠《给 Java 说句公道话》 https://www.yinwang.org/blog-cn/2016/01/18/java
（保命叠甲 ps. 我是前端，我爱 JavaScript ，引用段落不代表我的观点） |
 |
16
coderpwh 323 天前 1
这个描述不太直观，本质就是 Svelte 把 dom 的操作工作在编译时就生成了代码，vue 这些加了一层抽象，在运行时还是依赖虚拟 dom 在操作
|
 |
17
yc8332 323 天前
前端是没事干吗？一天天出新名词，搞花活。
|
 |
18
mandex 323 天前
我用 jQuery 我是土包子
|
 |
19
daolanfler 322 天前
这比喻太抽象了，下面 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 在性能方面具有一些优势。 |
 |
20
lete 322 天前
我的观点，欢迎各位大佬评价+指正 https://blog.imlete.cn/article/Virtual-DOM-slower-real-DOM.html
|
 |
21
ljzxloaf 253 天前
简单来说，Svelte 是编译执行，Vue/React 是解释执行。
|
Select Language