使用imba.io框架得到比 vue 快50倍的性能基准

我是标题党吗？是，但也不是。以图为证。

上图表示了vue, react 以及 imba 在 todo 这个项目中拥有60个 todoItem 不同进行 crud 操作的表现。可以看到 imba 达到了每秒操作5w次以上。如果你也想试一试该测试,可以访问Todos Bench 。测试使用的是 Benchmark.js 。

imba 简单介绍

imba 是一种新的编程语言，可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。

下面是语法：

// 自定义标签
tag App
  // 属性
  prop items
  // 方法定义
  def addItem
    if @input.value
      items.push(title: @input.value)
      @input.value = ""
  def toggleItem item
    item:completed = !item:completed
// 挂载 Imba.mount(element, into)
// 如果没有第二个参数，默认挂载到 document.body 上面
Imba.mount <App.vbox items=[] ->
  <form.bar :submit.prevent.addItem>
    <input@input>
    <button> 'add'
  <ul> for item in items
    <li .done=item:completed :tap.toggleItem(item)> item:title

可以看出作者喜欢 ruby 以及 pug与，偏向于缩进类风格(个人并不是很喜欢这种语法风格)。具体语法可以参考 imba 文档 。当然了，因为可以编译成js，所以服务端编译成 js 进行node开发也是可以实现的。

imba 框架极速的性能基础

任何一个实现的性能优化都有其理论基础，那么 imba 性能那么快的基础究竟是什么呢？答案也就是 memoized DOM（记忆DOM）。

理论基础

浏览器的 DOM 操作可以说是浏览器最终要的功能，无论框架是基于虚拟 DOM 或者是真实 DOM，最终离不开操作 DOM 对象。

HTML DOM 是浏览器定义了访问和操作 HTML 文档的标准方法。但是操作 DOM 的接口是 JavaScript。但是浏览器通常会把 js 引擎和渲染引擎分开实现。也就是页面实际渲染部分是和解析js部分分开的。

借着《高性能的 JavaScript》话说，如果把 DOM 和 js 各自想象为岛屿。他们需要一座桥进行沟通。所以每一次执行 DOM 操作就过桥一次。

那我们先谈谈虚拟DOM，虚拟DOM 的性能提升在于是将 DOM 的对比放在了js层。进而通过对比不同之处来进行实际的 DOM 渲染。也就是说，其实虚拟DOM 并没有“实际”的性能收益，桥仍旧还在那边。仅仅在 js引擎需要过桥的那边找到了一位聪明睿智的大叔,对过桥的人和过桥的货物进行优化和限制(虚拟DOM 高性能的diff算法，状态批量更新)。