V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ksco
V2EX  ›  分享创造

终于把 Svelte 这类无虚拟 DOM 的前端框架的实现原理搞清楚了

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

    去年从前端同事口中知道了 Svelte,竟然可以不用 VirtualDOM 就能精准地更新 DOM 树,一直很好奇其原理。

    最近闲着没事什么事,就去研究了一下 Svelte 的源码,但因为 Svelte 的项目代码太庞大,感觉抓不到重点。最后找到了一个和 Svelte 类似,但是代码量要小很多的项目 MalinaJS,花了几天时间把核心部分的代码看懂了,感觉挺有成就感的哈哈哈。

    最后出于学习的目的模仿 MalinaJS 实现了一个小的 Demo 。代码量很小,只有几百行代码,如果你也感兴趣的话,可以看看。

    项目地址: https://github.com/ksco/slim

    非常喜欢的一句话送给大家:

    "What I cannot create, I do not understand." -- Richard Feynman

    8 条回复    2021-03-27 18:48:24 +08:00
    Adalwin
        1
    Adalwin   213 天前
    不错!有空看看(并交流交流)

    谢谢分享!
    yanzhiling2001
        2
    yanzhiling2001   213 天前
    厉害厉害
    JinTianYi456
        3
    JinTianYi456   211 天前
    完全不懂,"用 VirtualDOM 就能精准地更新 DOM 树" "不用 VirtualDOM 就能精准地更新 DOM 树",有链接让我来个入门吗?
    lifetimeporn
        4
    lifetimeporn   211 天前
    borrowed lots of code from it
    ksco
        5
    ksco   211 天前 via iPhone
    @JinTianYi456
    1. 用 VirtualDOM 就能精准地更新 DOM 树。这个可以去搜一下 VirtualDOM 的原理
    2. 不用 VirtualDOM 就能精准地更新 DOM 树。这个可以看看 @djyde 的这篇文章: https://lutaonan.com/blog/svelte/
    3dwelcome
        6
    3dwelcome   211 天前   ❤️ 1
    就是一个前端语法编译器,之所以不需要虚拟 DOM,是改成了命令反射式语法。

    举个不恰当的例子,虚拟 DOM 好比是 GC,会自动收集相关依赖。
    而 Svelte 好比是 COM 引用计数,用之前变量必须写上$ :语法,来告诉编译器,这个变量和别的不一样,有事件反射关联性,是需要特殊引用处理的。

    我下一步工作也是类似的方面,把特制 HTML 语法编译到前端,只不过编译和逻辑处理代码都是 C++。webasm 只是把语言门槛铺平,却没有提供任何实际操作 DOM 的接口。
    cereschen
        7
    cereschen   211 天前
    写编译器就是脏活累活 svelte 到现在 数组对象的操作还不能触发重渲染
    ksco
        8
    ksco   211 天前 via iPhone
    @cereschen 其实这类框架的核心就是变化检测。

    Svelte 用的是脏标记,并且认为只有发生赋值操作时才需要将数据标记为脏,所以自然就检测不到 Array.push 这种。
    我参考的这个 MalinaJS 就没有这个问题,因为 MalinaJS 检测的是绑定,而不是变量赋值。
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1035 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:04 · PVG 03:04 · LAX 12:04 · JFK 15:04
    ♥ Do have faith in what you're doing.