クロージャとbindの引数束縛パフォーマンス

JavaScriptで引数を束縛したい場合、クロージャかbindを使うのだが…

function plus(x, y) {
    return x + y;
}

function multiply(x, y) {
    return x * y;
}

// Function.prototype.bindで束縛
const plus1 = plus.bind(null, 1);

plus1(5);    // => 6


// closureで束縛
function closure(func, param) {
    return function(index) {
        return func(param, index);
    };
}

const twice = closure(multiply, 2);

twice(5);    // => 10

なんとなく、どちらが速いのか気になったので比べてみた。

console.time('bind');
for (let i = 0; i < 100000; i++) {
    const plusX = plus.bind(null, i);
    const multiplyX = multiply.bind(null, i);

    for (let j = 0; j < 10; j++) {
        plusX(j) + multiplyX(j);
    }
}
console.timeEnd('bind');


console.time('closure');
for (let i = 0; i < 100000; i++) {
    const plusX = closure(plus, i);
    const multiplyX = closure(multiply, i);

    for (let j = 0; j < 10; j++) {
        plusX(j) + multiplyX(j);
    }
}
console.timeEnd('closure');

結果

$ nvm use v6
Now using node versions/node/v6.2.1

$ node speed.js
bind: 106.394ms
closure: 33.421ms

node v6.2.1ではクロージャを使うほうが3倍ほど高速らしい。

node ver.4でも測定

$ nvm use v4
Now using node versions/node/v4.4.5

$ node speed.js
bind: 949ms
closure: 33ms

node ver.4では30倍程度の差がついた。というよりも、ver.4とver.6でFunction.prototype.bindが10倍も高速になっている。

node v4.4.5にはV8 v4.5、node v6.2.1にはV8 v5.0が搭載されている。メジャーバージョンアップで大きな最適化が施されていることがわかる。さすがGoogleである。未だJSエンジンの進化は止まらず。

なおこのコードをFirefoxChromeの最新版で比較してみると…

Chrome 51.0.2704.79

bind: 127.187ms
closure: 34.819ms

Firefox 47.0

bind: タイマー開始
bind: 36.4ms
closure: タイマー開始
closure: 6.85ms

Firefox圧勝!

generatorとpromiseで行う非同期処理

2年ぐらい前にgeneratorでコールバック地獄から解放されるぜウェーイと話題になりましたが、今現在、世間ではgeneratorによる非同期処理ってどのくらい使われているんでしょうね? 自分たちのチームでは今更過去のコードを書き直すのも面倒なので使ってません。個人的にはasync/awaitがES.nextに入りそうなので今から使わなくてもいいかなぁ、という感じ。

generatorを使った書き方、よく忘れるのでここにメモしておく

まず適当なプロミスを返す関数を定義

'use strict';

// 引数を2倍して解決するpromiseを返す
function twice(value) {
  return Promise.resolve(value * 2);
}

// 引数ミリ秒後に解決するpromiseを返す
function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {resolve(time)}, time);
  });
}

// 失敗するpromiseを返す
function error(e) {
  return Promise.reject(new Error(e));
}

promiseをyieldして非同期処理を実行するexecAsyncを定義、おそらくcoモジュールもこんな感じの処理をしているんでしょうね。

// promiseをyieldして非同期処理を実行するexecAsyncを定義
function execAsync(generator) {
  const g = generator();

  let n = g.next();   // ここで最初のyieldまで実行される

  if (!n.done) {         // yieldが無かった場合はn.doneはtrueになる
    loop(n.value);     // n.valueは最初のyield式のpromise
  }

  function loop(p) {
    p.then((result) => {
      let n = g.next(result);   // nextの引数はyield式の評価結果として返される。そして次のyieldまで実行
      if (!n.done) {
        loop(n.value);
      }
    }).catch((e) => {
      let n = g.throw(e);
      if (!n.done) {
        loop(n.value);
      }
    });
  }
}

実行する

// 実行!
execAsync(function *() {
  let a;
  a = yield twice(1);
  console.log(a);   // => 2

  a = yield twice(2);
  console.log(a);   // => 4

  const t = yield sleep(1000);
  console.log(`${t}ミリ秒停止した`);

  try {
    yield error('Promiseがrejectされると');
  } catch (e) {
    console.log(`${e.message}エラーがスローされる`);
  }

  a = yield twice(3);
  console.log(a);    // => 6

  a = yield twice(4);
  console.log(a);    // => 8
});

結果

2
4
1000ミリ秒停止した
Promiseがrejectされるとエラーがスローされる
6
8