javascript 配列の分割処理で「splice」と「slice」とのパフォーマンスを計測する
- 作成日 2022.07.21
- javascript
- javascript
javascriptで、「splice」と「slice」で同じ配列の分割処理を行った時のパフォーマンスを計測するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- ブラウザ chrome 103.0.5060.114
パフォーマンス計測
「performance.now」を使用して、「splice」と「slice」を使用して、
配列の分割処理を100万回実行し、パフォーマンスを計測するサンプルコードとなります。
<script>
// 実行回数
const times = 1_000_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)`);
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 2個の配列に分割
function arrSplice(arr) {
let tmpArr;
while (arr.length > 0) {
tmpArr = arr.splice(0, 2);
}
}
function arrSlice(arr) {
let tmpArr;
for (i = 0; i < arr.length; i += 2) {
tmpArr = arr.slice(i, i + 2);
}
}
// 計測
start = performance.now();
for (let i = 0; i < times; ++i) {
arrSplice(arr)
}
end = performance.now();
benchmark('splice', start, end);
// 計測
start = performance.now();
for (let i = 0; i < times; ++i) {
arrSlice(arr)
}
end = performance.now();
benchmark('slice', start, end);
</script>
実行結果(chrome 102.0.5005.115)
<1回目>
実行回数:1000000回 関数名:splice 実行時間:4.00(ms)
実行回数:1000000回 関数名:slice 実行時間:3.40(ms)
<2回目>
実行回数:1000000回 関数名:splice 実行時間:3.70(ms)
実行回数:1000000回 関数名:slice 実行時間:3.40(ms)
<3回目>
実行回数:1000000回 関数名:splice 実行時間:3.40(ms)
実行回数:1000000回 関数名:slice 実行時間:3.40(ms)
ほぼ同じという結果になりました。
firefox101では、ほぼ同じという結果になりました。
<1回目>
実行回数:1000000回 関数名:splice 実行時間:3.00(ms)
実行回数:1000000回 関数名:slice 実行時間:2.00(ms)
<2回目>
実行回数:1000000回 関数名:splice 実行時間:1.00(ms)
実行回数:1000000回 関数名:slice 実行時間:4.00(ms)
<3回目>
実行回数:1000000回 関数名:splice 実行時間:3.00(ms)
実行回数:1000000回 関数名:slice 実行時間:4.00(ms)
-
前の記事
コマンドプロンプト フォルダ配下にあるファイルの数をカウントする 2022.07.21
-
次の記事
PC正常性チェックツールで「このPCでの更新プログラムは組織が管理しています」が発生した場合の対処法 2022.07.21
コメントを書く