Javascript(자바스크립트) - 반복문 for loop 성능 향상 팁

Javascript(자바스크립트) - 반복문 for loop(루프) 팁

 

 

(1). Javascript -  for loop 일반적인 패턴(Pattern)

 

① 일반적인 패턴 에서는 Loop 문 수행 시 각 배열 및 오브젝트의 length 에 접근한다.

② Json 및 collection 객체 일 경우는 수행 비용이 크다고 볼 수 있다.

③ DOM 접근에 필요한 수행 비용을 줄이자.

 

//for_normal.js
 
for ( var i = 0; i < testObj.lenght; i++)
{
     // testObj[i] 를 구현하는 객체(array, json, collection...) 핸들링 코드
}
 
 

(2). Javascript -  for loop 성능 향상 패턴(Pattern)

 

① max  변수에 객체의 길이(lengh)값을 캐시해서 사용한다.

② length  값은 한 번 구한 후 for loop 실행하는 동안 참조하여 사용

//for_tuning.js
 
for ( var i = 0, max = testObj.length; i < max; i++)
{
     // testObj[i] 를 구현하는 객체(array, json, collection...) 핸들링 코드
}
 
 

  이와 같이 코딩하면 HTML collection 순회 처리 시에 속도 향상을 가져올 수 있다.