无虚拟 DOM 框架

无[虚拟DOM]框架/库/编译器最为典型的两个项目：Svelte 和 SolidJS。

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建项目的编译阶段来处理。

与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能有针对性的更新 DOM。

Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。举例来说，当前的框架无论是 React [Angular]还是 Vue，不管你怎么编译，使用的时候必然需要『引入』框架本身，也就是所谓的运行时 (runtime)。但是用 Svelte 就不一样，一个 Svelte 组件编译了以后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！

当然，这不是说 Svelte 没有运行时，但是出于两个原因这个代价可以变得很小：

Svelte 的编译风格是将模板编译为命令式 (imperative) 的原生 DOM 操作。比如这段模板：

<a>{{ msg }}</a>

会被编译成如下代码：

  function renderMainFragment ( root, component, target ) {
  var a = document.createElement( 'a' );


  var text = document.createTextNode( root.msg );
  a.appendChild( text );


  target.appendChild( a )


  return {
  update: function ( changed, root ) {
  text.data = root.msg;
  },


  teardown: function ( detach ) {
  if ( detach ) a.parentNode.removeChild( a );
  }
  };
  }

可以看到，跟基于 Virtual DOM 的框架相比，这样的输出不需要 Virtual DOM 的 diff/patch 操作，自然可以省去大量代码，同时，性能上也和 vanilla JS 相差无几（仅就这个简单示例而言），内存占用更是极佳。这个思路其实并不是它首创，之前有一个性能爆表的模板引擎 Monkberry.js 也是这样实现的，ng2 的模板编译其实也跟这个很类似（但是中间加了一层渲染抽象层）。