javascript 数値を2桁に0埋めする処理で「slice」と「padStart」のパフォーマンスを計測する
- 作成日 2022.10.26
- javascript
- javascript
javascriptで、数値を2桁に0埋めする処理で「slice」と「padStart」で同じ処理を行った時のパフォーマンスを計測するサンプルコードを記述してます。「chrome」と「firefox」と「safari」の3種類のブラウザで実行してます。結果として、どのブラウザでも大差はなかったです。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 106.0.5249.103
パフォーマンス計測
「performance.now」を使用して、「slice」と「padStart」をそれぞれ使用して、数値を2桁に0埋めする処理を10万回実行し、パフォーマンスを計測するサンプルコードとなります。
<script>
// 実行回数
const times = 100_000;
// 空白を埋めるだけの関数
function spacePadding(val, n = 8) {
for (; val.length < n; val += ' ');
return val;
}
// 計測結果を表示
const benchmark = (name, start, end) => {
let report = (end - start).toPrecision(3);
// 表示を見やすくするため関数名に空白を埋める
name = spacePadding(name)
console.log(`実行回数:${times}回 関数名:${name} 実行時間:${report}(ms)`);
}
// 日付
let date = new Date('2022-12-5');
// 計測
start = performance.now();
for (let i = 0; i < times; ++i) {
("0" + String(date.getDate())).slice(-2);
}
end = performance.now();
benchmark('slice', start, end);
// 計測
start = performance.now();
for (let i = 0; i < times; ++i) {
String(date.getDate()).padStart(2, '0');
}
end = performance.now();
benchmark('padStart', start, end);
</script>
実行結果(chrome 106.0.5249.103)
<1回目>
実行回数:100000回 関数名:slice 実行時間:4.60(ms)
実行回数:100000回 関数名:padStart 実行時間:8.30(ms)
<2回目>
実行回数:100000回 関数名:slice 実行時間:2.40(ms)
実行回数:100000回 関数名:padStart 実行時間:4.10(ms)
<3回目>
実行回数:100000回 関数名:slice 実行時間:2.70(ms)
実行回数:100000回 関数名:padStart 実行時間:3.80(ms)
パフォーマンスは「slice」の方が良さそうです。
firefox105も、「slice」の方が良さそうです。
<1回目>
実行回数:100000回 関数名:slice 実行時間:11.0(ms)
実行回数:100000回 関数名:padStart 実行時間:9.00(ms)
<2回目>
実行回数:100000回 関数名:slice 実行時間:12.0(ms)
実行回数:100000回 関数名:padStart 実行時間:28.0(ms)
<3回目>
実行回数:100000回 関数名:slice 実行時間:8.00(ms)
実行回数:100000回 関数名:padStart 実行時間:13.0(ms)
safari15.5は「padStart」の方が良さそうです。
実行回数:100000回 関数名:slice 実行時間:27.00(ms)
実行回数:100000回 関数名:padStart 実行時間:17.0(ms)
-
前の記事
Linux ディレクトリの中を全て別のディレクトリ直下にコピーする 2022.10.26
-
次の記事
CentOs9 phpMyFAQを構築する手順 2022.10.27
コメントを書く