0

私は私のプロジェクトのために小さなjQuery風のライブラリに取り組んでおり、これまでのところすべてうまく機能していますが、いくつかのパフォーマンスの問題があり、いくつかのアイデアはありますが、その理由を理解できないようですが、最初に、問題のコード (実際の問題を示すために縮小):

デモ: http://jsbin.com/umemot/1/edit

(function(doc, win) {

  // Utils:

  var AP = Array.prototype;

  function _toArray(obj) {
    return AP.slice.call(obj);
  }

  function _curry(fn, that) {
    return function() {
      return fn.apply(that || arguments[0], AP.slice.call(arguments));
    };
  }

  function _flatten(arr) {
    return AP.concat.apply([], arr);
  }

  function _uniq(arr) {
    return arr.filter(function(el, i) {
      return arr.indexOf(el) == i;
    });
  }

  function _removeEmpty(arr) {
    return arr.filter(function(v) { return v; });
  }

  // Proto:

  function Lib(selector) {
    this.el = this._init(selector);
  }

  function lib(selector) {
    return new Lib(selector);
  }

  // Lib:

  Lib.prototype = {

    _init: function(selector) {
      return _toArray(doc.querySelectorAll(selector));
    },

    _with: function(fn) {
      var result = [];
      this.each(function() { result.push(fn.call(this, this)); });   
      this.el = _removeEmpty(_uniq(_flatten(result)));
      return this;
    },

    _matches: function(selector) {
      return this._with(function() {
        var parent = _toArray(this.parentNode.querySelectorAll(selector));
        return ~parent.indexOf(this) && this;
      });
    },

    each: function(fn) {
      return this.el.forEach(_curry(fn)), this;
    },

    find: function(selector) {
      return this._with(function() {
        return _toArray(this.querySelectorAll(selector));
      });
    },

    children: function(selector) {
      return this._with(function() {
        return _toArray(this.children);
      });
    },

    filter: function(selector) {
      return this._matches(selector);
    }

  };

  win._ = lib;

}(document, window));

jQueryのように使用します：

_('#outer').find('div').children().filter('a');

私が抱えている問題は、ここhttp://jsperf.com/lib-vs-jquery-69でわかるように、jQuery と比較してパフォーマンスが大幅に低下することです。

これが私が考えていることです：

  • これらすべての ES5 配列メソッドが速度を低下させています
  • ある種のガベージコレクションの問題？多分私は何かを漏らしていますか？
  • その_matches方法は十分に効率的ですか？

上記のすべてにより、パフォーマンスが jQuery よりも 60% 遅くなる可能性がありますか、それとも私の実装が間違っているのでしょうか? 何か案は？

編集：私は他のブラウザでテストしており、Chromeだけで「大きな問題」のようです...Operaは20％遅いと言いますが、Firefoxはわずか3％です...

4

0 に答える 0