[백업][가리사니] array [ some vs reduce vs for ] javascript performance
html, javascript

이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

가리사니의 속도 개선 좀 할겸 만들어둔 라온 자바스크립트 라이브러리 속도개선을 하려는 도중 갑자기 생각난것중에.. for 문이 빠를까 some 이 빠를까.. 라는 의문이 들기 시작했습니다. 보통은 for가 더 빠를 것 같지만.. 스크립트다보니.. for는 스크립트에의해.. some은 네이티브에 의해 처리된다는 것을 생각해봤을때 some이 더 빠를 수 있을 것 같아 실험해보았습니다.

추가 : 2015-10-04

Array.prototype.some 외에도 Array.prototype.reduce 를 추가하였습니다.

코드

// 기본값 세팅
var a = [];
var t = 0;
for (var i = 1 ; i <= 1000000 ; i++) { a.push(i); }

// for의 시간측정
t = new Date().getTime();
for (var i = 0 ; i < a.length ; i++)
{
	if (a[i] == 1000000) {  console.log('done'); }
}
console.log('f1-time : ' + (new Date().getTime() - t));

// for의 시간측정 : 내부가 비어있을때.
t = new Date().getTime();
for (var i = 0 ; i < a.length ; i++) {}
console.log('f2-time : ' + (new Date().getTime() - t));


// some의 시간측정 : done를 넣은건 함수를 인자로 넣다보니.. 혹시 쓰레드로 돌지 않을까 라는 생각에 넣어본겁니다.
// 자바스크립트에선 new 하는것들은 죄다 쓰레드로 돌고, 몇몇 네이티브는 쓰레드로 돌아서... 혹시나 하는 마음에....
t = new Date().getTime();
a.some(function(e)
{
	if (e == 1000000) {  console.log('done'); }
});
console.log('s1-time : ' + (new Date().getTime() - t));

// some의 시간측정 : 내부가 비어있을때.
t = new Date().getTime();
a.some(function(e){});
console.log('s2-time : ' + (new Date().getTime() - t));


// reduce의 시간측정 : done를 넣은건 some과 마찬가지..이유.
t = new Date().getTime();
a.reduce(function(d, e)
{
	if (e == 1000000) {  console.log('done'); }
});
console.log('r1-time : ' + (new Date().getTime() - t));

// reduce의 시간측정 : 내부가 비어있을때.
t = new Date().getTime();
a.reduce(function(d, e){});
console.log('r2-time : ' + (new Date().getTime() - t));

결과

done f1-time : 1238 f2-time : 831 done s1-time : 17 s2-time : 15 done r1-time : 26 r2-time : 14

결론

역시 네이티브가 빠릅니다.!! 다만 some / reduce 는 IE9 부터 지원됩니다.

some / reduce 의 속도차이는.. 무의미합니다. 다만 동작의 차이라고 볼 수 있는데요.

Array.prototype.some -> function(nowVal:현재값, idx:인덱스, array:전체배열)
{
	//return false; 를 사용할 경우 정지함.
}
Array.prototype.reduce-> function(lastReturnValue:마지막리턴값, nowVal:현재값, idx:인덱스, array:전체배열)
{
	// return 값; 이렇게 쓸경우 마지막 값이 다음 콜백의 첫번째 인자로 반환됨.
	// lastReturnValue : 최초의 값이나 리턴이 없을 경우 undefined 가 리턴됨.
	// ┗ 물론 ([1,2,3]).reduce(functin, 최초의값); 이런식으로 최초의 값을 줄 수있다.
}

추신

라이브러리에 for를 some로 고칠 수 있는 부분들을 조금 손봐야겠네요. IE8 이하에서 some의 대체 코드를 만들경우 for를 이용해서 만들기에 약간의 속도저하는 있지만.. 사실상 제 서비스에서 IE8이하의 사용자는 적습니다. 하하하… (사실 사람이 적습니다….)

  • 후기.. 열심히 많이 고쳐놨는데.. 사실 효과는 없네요… 가리사니 실행추적을하니 html decoding과 insertPrev 쪽에서 가장 많이 잡아먹는거 같네요.. (둘다 네이티브 코드라… 더이상 빠르게 할수가 없네요… : 아에 다른방법을 찾지 않는이상..) 정말 초대량으로 써야 아주 약간 차이나는 정도인듯합니다.