V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
leochenliu
V2EX  ›  JavaScript

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

  •  
  •   leochenliu · 200 天前 · 2744 次点击
    这是一个创建于 200 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Svelte “无需虚拟 DOM”

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

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

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

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

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

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

    21 条回复    2024-03-06 21:12:26 +08:00
    Dragonphy
        1
    Dragonphy  
       200 天前
    最近 Vue 在写 Vapor Mode ,可以看看 https://github.com/vuejs/core-vapor
    june4
        2
    june4  
       200 天前
    我更喜欢的 solid-js 也是这个模式
    kneo
        3
    kneo  
       200 天前 via Android
    一个技术词汇理解还得编这么一大段故事,好累啊。真的不这样就看不懂吗?
    siweipancc
        4
    siweipancc  
       200 天前 via iPhone
    乱七八糟的,面向 ppt 推广,只会吸引到圈外人
    CHTuring
        5
    CHTuring  
       200 天前
    @siweipancc
    有一说一,这不算是 ppt 推广。
    Svelte 和 Solid 在营销页和活动页这些确实很方便,在国外还是有点市场的。
    CHTuring
        6
    CHTuring  
       200 天前
    喜欢 Vue 写法的可以试试 Svelte ,更快更好
    喜欢 React 写法的可以是试试 Solid ,灵活轻便
    特别是在 Astro 里面用,都是无虚拟 DOM ,搭配上部份 Node 服务的功能,做轻快的页面很舒服。
    Yuanlaoer
        7
    Yuanlaoer  
       200 天前
    不就是“计算增量”么,再罗嗦点,“只对产生变化的部分做处理”
    围绕虚拟 DOM 讲这么多,说是给新手看吧,明显是引入了更多概念;说是给老手看把,又非要举涂色书的例子。

    框架放一边,这种讲述方式我只想打 0 分
    Perry
        8
    Perry  
       200 天前 via iPhone   ❤️ 1
    这是 LLM 的回答么?同意楼上,用多了 React 的自然知道 virtual DOM 的优势和劣势,Svelte 并没有很牛逼,算是一种返祖现象。
    whistleryz
        9
    whistleryz  
       200 天前 via iPhone
    VDOM 渲染性能是否存在很大的问题这个还是得分场景看,搞个不同维度 benchmark ,用数据说话。

    此外,VDOM 还一定程度支持了跨端开发的能力,这对块,即使性能有损,也会有很大的适用场景
    whistleryz
        10
    whistleryz  
       200 天前 via iPhone
    另外你的这个描述看起来是想说类 Svelte 和类 React 实现局部更新或者增量渲染的区别

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

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

    技术方案无所谓优劣,还是要看具体使用场景
    MetroWind
        11
    MetroWind  
       200 天前
    用就完了,没什么好理解的~~
    renmu
        12
    renmu  
       200 天前 via Android
    jQuery 天下第一🐶
    dcoder
        13
    dcoder  
       200 天前
    你们前端以为 React/Vue 就是尽头了吗?
    Too young! 我们后端扶你们起来继续学!! 哈哈哈
    siweipancc
        14
    siweipancc  
       200 天前 via iPhone
    @CHTuring 我会写这玩意,但我看不懂你的描述。那么问题来了,你这描述究竟想达到什么效果?
    jaywhen
        15
    jaywhen  
       200 天前 via iPhone
    “ JavaScript 的各种“WEB 框架”,层出不穷,似乎一直在推陈出新,而其实呢,全都是在黑暗里瞎蒙乱撞。JavaScript 的社区以幼稚和愚昧著称。你经常发现一些非常基本的常识,被 JavaScript“专家”们当成了不起的发现似的,在大会上宣讲。我看不出来 JavaScript 社区开那些会议,到底有什么意义,仿佛只是为了拉关系找工作。” ——王垠《给 Java 说句公道话》 https://www.yinwang.org/blog-cn/2016/01/18/java

    (保命叠甲 ps. 我是前端,我爱 JavaScript ,引用段落不代表我的观点)
    coderpwh
        16
    coderpwh  
       200 天前   ❤️ 1
    这个描述不太直观,本质就是 Svelte 把 dom 的操作工作在编译时就生成了代码,vue 这些加了一层抽象,在运行时还是依赖虚拟 dom 在操作
    yc8332
        17
    yc8332  
       200 天前
    前端是没事干吗?一天天出新名词,搞花活。
    mandex
        18
    mandex  
       200 天前
    我用 jQuery 我是土包子
    daolanfler
        19
    daolanfler  
       199 天前
    这比喻太抽象了,下面 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
        20
    lete  
       199 天前
    我的观点,欢迎各位大佬评价+指正 https://blog.imlete.cn/article/Virtual-DOM-slower-real-DOM.html
    ljzxloaf
        21
    ljzxloaf  
       130 天前
    简单来说,Svelte 是编译执行,Vue/React 是解释执行。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3621 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 04:15 · PVG 12:15 · LAX 21:15 · JFK 00:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.