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

[ksco]

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

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

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

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

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

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

[Adalwin]

不错！有空看看（并交流交流）

谢谢分享！

[40EaE5uJO3Xt1VVa]

厉害厉害

[JinTianYi456]

完全不懂，"用 VirtualDOM 就能精准地更新 DOM 树" "不用 VirtualDOM 就能精准地更新 DOM 树"，有链接让我来个入门吗？

[lifetimeporn]

borrowed lots of code from it

[ksco]

@JinTianYi456
1. 用 VirtualDOM 就能精准地更新 DOM 树。这个可以去搜一下 VirtualDOM 的原理
2. 不用 VirtualDOM 就能精准地更新 DOM 树。这个可以看看 @djyde 的这篇文章： https://lutaonan.com/blog/svelte/

[3dwelcome]

就是一个前端语法编译器，之所以不需要虚拟 DOM，是改成了命令反射式语法。

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

我下一步工作也是类似的方面，把特制 HTML 语法编译到前端，只不过编译和逻辑处理代码都是 C++。webasm 只是把语言门槛铺平，却没有提供任何实际操作 DOM 的接口。

[cereschen]

写编译器就是脏活累活 svelte 到现在 数组对象的操作还不能触发重渲染

[ksco]

@cereschen 其实这类框架的核心就是变化检测。

Svelte 用的是脏标记，并且认为只有发生赋值操作时才需要将数据标记为脏，所以自然就检测不到 Array.push 这种。
我参考的这个 MalinaJS 就没有这个问题，因为 MalinaJS 检测的是绑定，而不是变量赋值。