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