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
Author And Source
이 문제에 관하여(Javascript Performance), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heavyrisem/Javascript-Performance저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)