자바스크립트 성능 최적화 #2 : 렌더링 + α

자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.

브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다.

렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다.

• reflow, repaint 최소화
• 노출 제어를 통한 reflow 최소화 (display 속성 이용)
• DOM, 객체 캐싱
• 기타

reflow, repaint 최소화

같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)

reflow와 repaint에 대한 설명은 아래 글 참고

브라우저 렌더링 : reflow & repaint

// 전
var width = document.getElementById("layer1").style.width;
document.getElementById("layer2").style.width = width;
var heigth = document.getElementById("layer3").style.heigth;
document.getElementById("layer4").style.heigth = heigth;
 
// 후
var width = document.getElementById("layer1").style.width;
var heigth = document.getElementById("layer3").style.heigth;
document.getElementById("layer2").style.width = width;
document.getElementById("layer4").style.heigth = heigth;

노출 제어를 통한 reflow 최소화 (display 속성 이용)

여러가지 속성이 변경될 경우 최종 결과가 반영되는 마지막 시점에 요소를 출력하면 reflow, repaint 횟수를 줄일 수 있다.

// 전
var element = document.getElementById("list");
for (var i=0; i<100; i++) {
    element.style.width = i + "px";
}
 
// 후
var element = document.getElementById("list");
element.style.display = "none";
for (var i=0; i<100; i++) {
    element.style.width = i + "px";
}
element.style.display = "block";

DOM, 객체 캐싱

반복되는 요소를 미리 선언 후 사용하게 되면 성능이 향상됨

// 캐싱 전
for (var i=0; i<100; i++) {
    document.getElementById("test").style.left = i + "px";
}
 
// 캐싱 활용 후
var obj = document.getElementById("test");
for (var i=0; i<100; i++) {
    obj.style.left = i + "px";
}

기타

1) jquery 객체를 캐싱한 코드보다 직접 DOM을 사용하는 코드가 훨씬 빠르다.

2) 요소를 찾을때는 id를 사용하는것이 좋다.   class나 다른 방법보다 id를 통해 접근하는게 더 빠르다.