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

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

検証対象

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

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

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

検証環境

• メモリ: 2.00GB
• CPU: Intel Celeron N3050 1.60GHz
• Windows 10 Home 1511

低スぺ言うなし

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

	max	min	average
getter.literal	63	0	21.8
getter.property	47	0	21.8
property.hoge	32	0	15.6

Edge

	max	min	average
getter.literal	832	562	691.8
getter.property	743	507	652.4
property.hoge	171	133	151.4

Chrome

	max	min	average
getter.literal	239	2	62.4
getter.property	104	11	42.6
property.hoge	37	10	19.6

考察

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

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