-
자바스크립트 성능 최적화 #2 : 렌더링 + αCODING/JavaScript 2018. 12. 19. 17:12
자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.
브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다.
렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다.
- reflow, repaint 최소화
- 노출 제어를 통한 reflow 최소화 (display 속성 이용)
- DOM, 객체 캐싱
- 기타
reflow, repaint 최소화
같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)
reflow와 repaint에 대한 설명은 아래 글 참고
1234567891011// 전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;cs 노출 제어를 통한 reflow 최소화 (display 속성 이용)
여러가지 속성이 변경될 경우 최종 결과가 반영되는 마지막 시점에 요소를 출력하면 reflow, repaint 횟수를 줄일 수 있다.
12345678910111213// 전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";cs DOM, 객체 캐싱
반복되는 요소를 미리 선언 후 사용하게 되면 성능이 향상됨
12345678910// 캐싱 전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";}cs 기타
1) jquery 객체를 캐싱한 코드보다 직접 DOM을 사용하는 코드가 훨씬 빠르다.
2) 요소를 찾을때는 id를 사용하는것이 좋다. class나 다른 방법보다 id를 통해 접근하는게 더 빠르다.
댓글