Todos Bench 。测试使用的是 Benchmark.js 。imba 简单介绍

下面是语法：

// 自定义标签
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 
  
    
     'add'
  
 for item in items
    
 item:title
imba 框架极速的性能基础
理论基础
借着《高性能的 JavaScript》话说，如果把 DOM 和 js 各自想象为岛屿。他们需要一座桥进行沟通。所以每一次执行 DOM 操作就过桥一次。
function getEls(sel) {
  // 设置缓存
  if (!getEls.cache) getEls.cache = {};
  
  // 如果缓存中存在 el，直接返回 
  if (getEls.cache[sel]) {
    return getEls.cache[sel];
  }

  // 没有去通过 DOM 查询
  const r = document.querySelectorAll(sel || '?'),
    length = r.length;
  
  // 缓存并返回元素节点
  return getEls.cache[sel] = (length == 1) ? r[0] : r;
}
// 直接通过 querySelectorAll 获取节点
function getElsByDocument(sel) {
  const r = document.querySelectorAll(sel || '?'),
    length = r.length;
  return length == 1 ? r[0] : r;
}

// 简单性能测试
function simplePerTest(fn, el) {
  const fnName = fn.name
  console.time(fnName)
  
  // 2000 次操作
  for(let i = 0,len = 2000; i < len; i++) {
    fn(el)
  }
  console.timeEnd(fnName)
}
框架实践
tag Component
  def render
    
       "Welcome"
       "I am a component"
var Component = Imba.defineTag('Component', function(tag){
  tag.prototype.render = function (){
    var $ = this.$;
    // 返回dom
    return this.setChildren($.$ = $.$ || [
      createElement('h1',$,0,this).flag('title').setText("Welcome"),
      createElement('p',$,1,this).flag('desc').setText("I am a component")
    ]).synced();
  };
});

// 在第一次调用时候 $.$不存在 $.$会等于 后面的数组
// 第二次调用 $.$ 是存在的，无运行时消耗
$.$ = $.$ || 数组
tag.prototype.setChildren = function (new$,typ){

  var old = this._tree_;
  
  if (new$ === old && (!(new$) || new$.taglen == undefined)) {
    return this;
  };
  if (!old && typ != 3) {
    this.removeAllChildren();
    appendNested(this,new$);
  } else if (typ == 1) {
    var caret = null;
    for (var i = 0, items = iter$(new$), len = items.length; i < len; i++) {
      caret = reconcileNested(this,items[i],old[i],caret);
    };
  } else if (typ == 2) {
    return this;
  } else if (typ == 3) {
    var ntyp = typeof new$;
      
    if (ntyp != 'object') {
      return this.setText(new$);
    };
      
    if (new$ && new$._dom) {
      this.removeAllChildren();
      this.appendChild(new$);
    } else if (new$ instanceof Array) {
      if (new$._type == 5 && old && old._type == 5) {
        reconcileLoop(this,new$,old,null);
      } else if (old instanceof Array) {
        reconcileNested(this,new$,old,null);
      } else {
        this.removeAllChildren();
        appendNested(this,new$);
      };
    } else {
      return this.setText(new$);
    };
  } else if (typ == 4) {
    reconcileIndexedArray(this,new$,old,null);
  } else if (typ == 5) {
    reconcileLoop(this,new$,old,null);
  } else if ((new$ instanceof Array) && (old instanceof Array)) {
    reconcileNested(this,new$,old,null);
  } else {
    // what if text?
    this.removeAllChildren();
    appendNested(this,new$);
  };  
  this._tree_ = new$;
  return this;
};
tag Component
  def render
    
       "Welcome"
      # 有 50% 几率 拥有 red class
       0.5)> "IMBA"

var Component = Imba.defineTag('Component', function(tag){
  tag.prototype.render = function (){
    var $ = this.$;
    return this.setChildren($.$ = $.$ || [
      _1('h1',$,0,this).flag('title').setText("Welcome"),
      _1('p',$,1,this).flag('desc').setText("Roulette")
    ],2).synced((
      $[1].flagIf('red',Math.random() > 0.5)
    ,true));
  };
});
我们在上面看到了 imba 框架的理论基础，那么他是否真的比vue快50倍？当然不是，这也就是在上面说我是标题党的原因。浏览器的运行机制真实世界的内存限制imba 框架与浏览器的畅想
单页应用程序（Single Page Applications，SPA）提供了很好的页面交互，但代价是构建的复杂性更高，多页面应用程序（Multi-page Applications，MPA）更容易构建，但最终会在页面之间出现空白屏幕。
爅s引擎 与 渲染引擎的关联
那么内置DOM 操作是否能够在js引擎中，是否能够减少过桥的性能消耗或者完全把桥打通。让我们拭目以待。