DOM 조작 효율성에 관한 이야기

😵 DOM 조작을 효율적으로 하려면?

결론부터 이야기 하자면 reflow와 repaint 과정을 최소한으로 줄이면 된다.
그런데 이 과정들은 무엇이고, 왜 과정을 줄여야 효율적인 것일까?

먼저 웹페이지의 화면이 어떻게 생성되는 것인지부터 알아보자.

📑 웹페이지의 화면은 어떻게 생성되는 것일까

우리가 사용하는 브라우저(크롬, 파이어폭스)들은 각자의
렌더링 엔진을 가지고 있고, 이를 통해 화면을 렌더링 한다.

렌더링 과정에 대해 간단히 알아보자

렌더링 과정

1. 해석
   브라우저는 HTML를 해석하여 DOM 트리를 만들고
   css를 해석하여 스타일 규칙을 만든다.
2. reflow
   해석 단계에서 만든 DOM 트리와 스타일 규칙을 합쳐
   모든 DOM 노드의 레이아웃을 계산하고
   렌더트리를 만드는 과정
3. repaint
   마지막으로 레이아웃 이외의
   스타일(background-color, visibility 등)을 적용하여
   화면에 그리는 과정

🎨 reflow와 repaint는 언제 일어날까

지금까지 알아본 reflow와 repaint는 리소스를 많이 잡아먹는 작업이다.
이 과정을 최소한으로 한다면 DOM 조작의 효율성을 높일 수 있을텐데
reflow와 repaint는 언제 일어나는 지 부터 알아보자.

reflow

레이아웃이 변경될 때 일어나므로
js에서 새로운 element를 추가, 삭제 또는 element 내의
innerText를 수정하는 등의 작업을 할 때 reflow가 발생한다.

repaint

1. repaint 단독으로 발생하는 경우
   버튼의 색을 바꾸거나 하는 레이아웃 외적인 스타일을 변경하는 경우이다.
2. reflow에 의해 발생하는 경우
   reflow가 일어나면 반드시 repaint도 일어난다.

🔍 결론

DOM 조작을 할 때마다 reflow나 repaint가 발생하기 때문에
반영해야할 부분을 모두 완성시킨 후에 마지막에 append 해주는 것이 좋다.
(reflow가 한번만 일어나기 때문)

예를 들어 to-do list의 경우 to-do list의 to-do element들을
하나씩 append 해준다면 to-do 갯수 만큼 reflow가 일어나므로
매우 비효율적.
하나의 div element를 createElement로 만들고 그 곳에
appendChild로 to-do들을 넣어준 후
마지막에 DOM에 append 해주는 것이 효율적일 것이다.