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

// 在第一次调用时候 $.$不存在 $.$会等于 后面的数组
// 第二次调用 $.$ 是存在的，无运行时消耗
$.$ = $.$ || 数组

其中查看源码，我们可以看到 setChildren 函数都是对真实DOM 进行了操作。获取之前的DOM节点进行一系列操作后将当前节点返回并缓存。

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
    <self>
      <h1.title> "Welcome"
      # 有 50% 几率 拥有 red class
      <p.desc .red=(Math.random > 0.5)> "IMBA"

可以得到如下代码，详细查看可以看出，imba 提取了可变量，放入了 synced 函数中，每次渲染中只会执行 synced 里面的数据，所以依然会得到极高的渲染速度

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((								 
 3/5   首页 上一页 1 2 3 4 5 下一页 尾页