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

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

  •  
  •   ksco · 2021-03-25 13:23:39 +08:00 · 4322 次点击
    这是一个创建于 1099 天前的主题,其中的信息可能已经有所发展或是发生改变。

    去年从前端同事口中知道了 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  
       2021-03-25 13:43:27 +08:00
    不错!有空看看(并交流交流)

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

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

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

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