Panda Noir

JavaScript の限界を究めるブログです。

Getterのパフォーマンスについて調査してみた

ES5で追加された機能、Getterと生プロパティのパフォーマンスの差について知りたくなったので検証してみました。超今更って感じですがね。

検証対象

比較するのは以下の4つです

  • リテラルを返すGetter
  • プロパティを返すGetter(privateメンバするときのアレ)
  • 生のプロパティ

関数を呼び出して計算を行うと計算の分パフォーマンスが落ちるのは明らかなので省略します。

検証環境

低スぺ言うなし

Node v8.1.0、Edge 25.10586.0.0、Chrome 58.0.3029.110それぞれで検証しました。

検証コード

class Getter {
    constructor() {
        this._prop = '42';
    }
    get literal() {
        return '42';
    }
    get property() {
        return this._prop;
    }
}
class Property {
    constructor() {
        this.hoge = '42';
    }
}
const getter = new Getter();
const property = new Property();

function performance(f) {
    let time = () => new Date();
    if (typeof Performance != 'undefined' && Performance.now) time = Performance.now.bind(Performance);

    const times = [];
    for (let i = 0; i < 5; i++) {
        const t1 = time();
        for (let j = 0; j < 5e5; j++) f();
        const t2 = time();

        times[i] = t2 - t1;
    }
    console.log(`[max]: ${Math.max(...times)}\n[min]: ${Math.max(...times)}\n[average]: ${times.reduce((a, b) => a + b, 0) / times.length}`);
}

performance(() => {getter.literal});
performance(() => {getter.property});
performance(() => {property.hoge});

結果

Node


maxminaverage
getter.literal63021.8
getter.property47021.8
property.hoge32015.6

Edge


maxminaverage
getter.literal832562691.8
getter.property743507652.4
property.hoge171133151.4

Chrome


maxminaverage
getter.literal239262.4
getter.property1041142.6
property.hoge371019.6

考察

すべてでproperty.hoge > getter.property > getter.literalとなりました。getter.propertyのほうがgetter.literalより早いというのは予想外でした。なぜなのでしょうか。

Nodeならともかく、Chrom、Edgeでは4倍近く速度が異なってくるようなので、Getterを使うときは慎重にならないといけませんね。といっても生プロパティで代用できる場面でGetter使う人はそういないと思いますが。