我是如何构建一个超快速的 JS/TS 框架的
其他框架是如何运作的？
乌托邦式的做法
动机
基准测试应用
性能测试
关联
其他框架是如何运作的？
如果我们完全不使用虚拟 DOM，而是直接使用真实的 DOM 会怎样？要回答这个问题，我们首先需要了解大多数框架的工作原理。为了更好地说明这一点，我画了一个简单的例子。
紫色代表 DOM/VDOM 节点，蓝色代表状态，红色代表差异比较，绿色代表补丁更新。我应该解释一下这张图里发生了什么。大多数使用状态和 DOM 的框架，在状态发生改变时都会这样处理。在这个例子中，state.bg 发生了改变。所以现在我们要遍历所有节点（这 5 个步骤）并渲染它们。如果某个节点发生了改变，就会执行补丁更新，将渲染的内容应用到实际的 DOM 中（绿色操作）。好的，这很酷，但是为什么只有 state.bg 发生了改变，我们却需要遍历每一个节点（注意，这里涉及到不同的差异比较算法，有些算法的差异比较方式不同）呢？
回到我最初的问题“为什么我们需要虚拟 DOM？”，答案是为了更快地遍历整个 DOM。好吧，如果我们不进行遍历呢？
乌托邦式的做法
但我希望向你展示，在我脑海中，它应该如何运作，既不需要差异比较，也不需要迭代，甚至不需要虚拟节点。
在这种理想情况下，我们修改了同一个 state.bg 文件，无需迭代（因此无需虚拟 DOM），只需渲染一次（即那个红点），并且只需修改一个受 state.bg 更改影响的参数/属性/节点。大大减少了不必要的迭代、虚拟节点的内存占用以及渲染次数，从而显著提升了速度。
动机
1. 更小的包大小
许多现代框架体积都非常大。说实话，我认为“Hello World”应用程序的大小不应该超过 10kb。
为了解决这个问题，我决定使用声明式的方式来描述组件。这不仅对应用程序的最终大小有积极的影响，而且还允许你直接在组件模板中使用 tree-shaking 算法。
Playground
2. 真正的响应式
我真的很想实现像 VueJS 那样的响应式。如果你改变了某个实体，页面上的数据也会随之改变；反之亦然。
Playground
3. 纯粹的可复用组件
任何框架都应该能够创建生命周期感知组件。这可以消除代码重复，并允许组件在多个地方复用。
Playground
4. 条件渲染和列表渲染指令
我真的很喜欢 ReactJS，它非常简洁明了，初次接触就感觉很棒。但是，如果你需要嵌套的条件渲染，你要么需要使用组件包装器，要么需要编写难以阅读的三元表达式。
Playground
基准测试应用
其他框架
React（Stack）— https://claudiopro.github.io/react-fiber-vs-stack-demo/stack.html
React（Fiber）— https://radi.js.org/fiber/Fiber%20Example.htm
Stencil.js — https://stencil-fiber-demo.firebaseapp.com/perf.html
性能测试
- https://pxyup.github.io/Revact/ - 尝试将限速倍数提高 6 倍。
- https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html（旧名称 faster-dom）
关联
- https://github.com/PxyUp/Revact - 源代码
- https://pxyup.github.io/Revact/ - 演示
- https://github.com/RyuuGan/html2FastDom - Html 转换器