@danielkalen/simplybind/comparison/dist/KnockoutJS@3.4.0/test.js

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

new TestSuite({
  'title': 'Input Update',
  'subtitle': 'Update the value of an input field 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 100,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = {
      'prop': ko.observable('value')
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<input type='text' data-bind='textInput: prop' />");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Input x100 Update',
  'subtitle': 'Update the value of 100 input fields 1,000 times',
  'measureMethod': 'sync',
  'timesToRun': 1000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = {
      'prop': ko.observable('value')
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<input type='text' data-bind='textInput: prop' />".repeat(100));
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Input Transform',
  'subtitle': 'Update the value of an input field 10,000 times and apply a transform function',
  'measureMethod': 'sync',
  'warmUps': 100,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = new function() {
      this.prop = ko.observable('value');
      this.propTransformed = ko.computed((function(_this) {
        return function() {
          return _this.prop().toUpperCase();
        };
      })(this));
      return this;
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<input type='text' data-bind='textInput: propTransformed' />");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Div HTML Update',
  'subtitle': 'Update the content of a div 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = {
      'prop': ko.observable('value')
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<div data-bind='html: prop'></div>");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Div HTML Same Update',
  'subtitle': 'Update the content of a div with the same value 10,000 times',
  'measureMethod': 'sync',
  'warmUps': 10000,
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _;
    _ = this;
    this.obj = {
      'prop': ko.observable('value')
    };
    container$.html("<div data-bind='html: prop'></div>");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop('value');
  }
});

new TestSuite({
  'title': 'Div HTML Placeholder',
  'subtitle': 'Update a placeholder in the content of a div 10,000 times',
  'measureMethod': 'sync',
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = new function() {
      this.prop = ko.observable('value');
      this.propTransformed = ko.computed((function(_this) {
        return function() {
          return "Current " + (_this.prop()) + " Works.";
        };
      })(this));
      return this;
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<div data-bind='html: propTransformed'></div>");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Div HTML 250 Placeholders',
  'subtitle': 'Update 250 placeholders in the content of a div 1,000 times',
  'measureMethod': 'sync',
  'warmUps': 100,
  'timesToRun': 1000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = new function() {
      this.prop = ko.observable('value');
      this.propTransformed = ko.computed((function(_this) {
        return function() {
          return "Current " + (_this.prop()) + " Works.";
        };
      })(this));
      return this;
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<div data-bind='html: propTransformed'></div>".repeat(250));
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Div Text Update',
  'subtitle': 'Update the textContent of a div 10,000 times',
  'measureMethod': 'sync',
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = {
      'prop': ko.observable('value')
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<div data-bind='text: prop'></div>");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Div Text Placeholder',
  'subtitle': 'Update a placeholder in the content of a div 10,000 times',
  'measureMethod': 'sync',
  'timesToRun': 10000,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = new function() {
      this.prop = ko.observable('value');
      this.propTransformed = ko.computed((function(_this) {
        return function() {
          return "Current " + (_this.prop()) + " Works.";
        };
      })(this));
      return this;
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<div data-bind='text: propTransformed'></div>");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});

new TestSuite({
  'title': 'Create 1k DOM Els',
  'subtitle': 'Create 1000 elements from array & insert into a div',
  'measureMethod': 'sync',
  'warmUps': 10,
  'timesToRun': 10,
  'setupFn': function(container$) {
    this.obj = {
      'divs': ko.observableArray()
    };
    this.offset = 0;
    container$.html("<div data-bind='foreach: divs'>  <div data-bind='text: $data'></div>  </div>");
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    var i;
    this.obj.divs((function() {
      var j, results;
      results = [];
      for (i = j = 1; j <= 1000; i = ++j) {
        results.push(i + this.offset);
      }
      return results;
    }).call(this));
    return this.offset += 1000;
  }
});

new TestSuite({
  'title': 'Update 1k DOM Els',
  'subtitle': 'Update 1000 existing elements 100 times',
  'measureMethod': 'sync',
  'timesToRun': 100,
  'setupFn': function(container$) {
    var _, currentValue;
    _ = this;
    this.obj = {
      'prop': ko.observable('value')
    };
    currentValue = 0;
    this.getNewValue = function() {
      return "value" + (currentValue++);
    };
    container$.html("<div data-bind='text: prop'></div>".repeat(1000));
    return ko.applyBindings(this.obj, container$[0]);
  },
  'teardownFn': function(container$) {
    ko.cleanNode(container$[0]);
    container$.empty();
    delete this.obj;
    return delete this.getNewValue;
  },
  'testFn': function() {
    return this.obj.prop(this.getNewValue());
  }
});