Javascript Performance

JS 로 웹에서 이미지의 모든 픽셀값을 가져오는 작업 중에 Performance 향상을 위해 정리한 내용

1. For Loop

For

const Arr = new Array(10000000).fill().map((_, i) => i);
let Time = 0;
let Sum = 0;

for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i = 0; i < Arr.length; i++)
        Sum += Arr[i];
    Time += Date.now()-Timer;
    Sum = 0;
}
console.log(Time/1000); // 10.225ms

For of

const Arr = new Array(10000000).fill().map((_, i) => i);
let Time = 0;
let Sum = 0;

for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i of Arr)
        Sum += i;
    Time += Date.now()-Timer;
    Sum = 0;
}
console.log(Time/1000); // 15.662

ForEach

const Arr = new Array(10000000).fill().map((_, i) => i);
let Time = 0;
let Sum = 0;

for (let j = 0; j < 10; j++) {
    const Timer = Date.now();
    Arr.forEach(i => {
        Sum += i;
    });
    Time += Date.now()-Timer;
    Sum = 0;
}
console.log(Time/10); // Stopped, 10회 반복: 358.2

1000회 반복 후 평균 시간을 내려 했지만 100회 이상 반복시 너무 긴 대기시간으로 인해 10회로 단축

For Optimized (Fastest)

const Arr = new Array(10000000).fill().map((_, i) => i);
let Time = 0;
let Sum = 0;

for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i = 0, x = Arr.length; i < x; i++)
        Sum += Arr[i];
    Time += Date.now()-Timer;
    Sum = 0;
}
console.log(Time/1000); // 9.761

Arr.length 값을 저장하여 성능 향상

2. Array Insert

Default Style (faster)

let Arr = [];
let Time = 0;
for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i = 0; i < 1000000; i++)
        Arr[i] = i;
    Time += Date.now()-Timer;
    Arr = [];
}
console.log(Time/1000); // 20.9, Whale Browser: 15.19

Array.push()

let Arr = [];
let Time = 0;
for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i = 0; i < 1000000; i++)
        Arr.push(i);
    Time += Date.now()-Timer;
    Arr = [];
}
console.log(Time/1000); // 21.132 Whale: 15.563

3. Array Declaration

Default Style

let Arr = [];
let Time = 0;
for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i = 0; i < 1000000; i++)
        Arr[i] = i;
    Time += Date.now()-Timer;
    Arr = [];
}
console.log(Time/1000); // 20.487

new Array (faster)

let Arr = new Array(1000000);
let Time = 0;
for (let j = 0; j < 1000; j++) {
    const Timer = Date.now();
    for (let i = 0; i < 1000000; i++)
        Arr[i] = i;
    Time += Date.now()-Timer;
    Arr = new Array(1000000);
}
console.log(Time/1000); // 1.05

결론

반복문은 For Optimized, 배열 삽입은 Default Style, 배열 선언은 new Array() 의 조합일 때 빠른 퍼포먼스를 제공한다

https://github.com/Heavyrisem/nodejslearn/tree/master/Performance