javascript #DOM reflow 시 자원 소모 최소화 방법

개념정리

DOM repaint

DOM repaint는 특정 엘리먼트의 visibility를 수정하거나 배경색이나 글자색 등을 바꿀 때 일어나는 것으로, 화면에 각 HTML 엘리먼트들의 위치는 변경되지 않고, 화면에 표시되는 것이 바뀔 때 일어난다. 특히 특정 DOM 엘리먼트의 visibility를 수정하면 해당 DOM의 자식 DOM까지 하위 트리 구조 전체를 탐색해야 하므로 CPU 자원이 소모된다.

 

DOM reflow

DOM reflow는 repaint와는 다르게 DOM이 화면에 표시되는 구조가 바뀔 때, 또는 CSS 클래스가 바뀔 때 일어난다. 이는 DOM 트리가 배치되는 위치를 전체적으로 다시 계산해서 화면에 출력하는 것을 의미하며. DOM repaint보다 자원소모가 크다.

 

repaint reflow 차이점

repaint는 스타일만 변경된 것이고, reflow는 화면 구조가 변경되었을 경우이다.

 

DOM reflow가 일어날 수 있는 상황

1. 특정 엘리먼트의 크기 변화
2. 자바스크립트에 의한 className 변화
3. 브라우저 창 크기 변화
4. DOM 엘리먼트의 offsetWidth와 clientHeight에 접근
5. getComputedStyle() 함수나 currentStyle(IE에 해당)에 접근

DOM reflow 시 자원 소모 최소화 방법

1. 크기가 변경될 DOM의 자식 엘리먼트를 최소화한다.
2. 변경될 DOM을 웹페이지의 아래쪽에 배치한다.
3. 만약 페이지에서 위치에 따른 영향을 없애고 싶다면 position을 "absolute"나 "fixed"로 설정한다. 이렇게 설정한 DOM 엘리먼트는 웹페이지 전체 흐름에는 영향을 미치지 않으므로 아무리 변경하더라도 전체 웹페이지에 대한 reflow는 일어나지 않는다. (성능상 유리)
4. 위치가 변경되는 엘리먼트들은 자식 엘리먼트를 많이 만들지 않는다.
5. 동적 변경될 DOM 구조는 단순화한다.
6. CSS 선택자를 정리한다. id 기반 선택자나 class 기반 선택자로 명시해서 DOM 탐색을 최소화한다. ex) table th → #noticeTitle
7. 반복적으로 실행되는 루프 안의 offsetWidth나 clientHeight에 접근하는 것을 자제한다.
8. 입력 폼 검증 처럼 같은 DOM을 여러 번 탐색해야 할 때는 *메모이제이션(memoization) 패턴을 이용하여 캐시에 저장하고 DOM 탐색을 한 번만 하도록 작성한다.
9. 엘리먼트 추가 시 화면에서 표시되지 않도록 display: none으로 백그라운드로 뺀 다음, 변경 내용들을 반영한 후, 다시 display: block 등으로 보이게 한다. (reflow가 한번 일어나도록 하는 방법)

 

#

참고도서 : 속깊은 자바스크립트

*메모이제이션 패턴 참고문서

2021/02/13 - [Study Note/Javascript] - javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern)

javascript #디자인패턴 - 메모이제이션 패턴 (memoization pattern)