HTML의 렌더링 과정에 대해서 지난번에 공부한 적이 있다. 간단하게는 다음과 같은 과정을 거치게 된다. 다운로드 : 화면을 그려주는데 필요한 리소스(html, css, js)를 다운로드 한다. HTML 준비 : 렌더링 되어야 할 HTML 요소로 DOM을 만들어 준다. CSS 준비 : css 코드를 가지고 와서 CSSOM을 만들어 준다. 두개 합치기 : 둘을 합쳐서 렌더링 트리를 생성한다. 위치 그리기 : 화면에 요소들이 어디 놓일 지 그려준다. 색칠하기 : 그려친 요소에 색을 칠해준다. 여기서 위치 그리기, Layout 단계가 다시 실행되면 색칠하기, Paint 단계도 다시 실행되는 Reflow는 성능 저하의 주요 원인이 된다.  메모이제이션을 통해 불필요한 기능 재실행을 줄이는 것 외에도, reflo..

DOM 앞서 브라우저의 렌더링 과정을 통해서 Repaint와 Reflow가 브라우저 렌더링 중 리소스를 가장 많이 잡아먹는 연산이라고 배웠다. 일반적인 소개 페이지와 같은 정적인 웹 애플리케이션이라면 DOM이 더 좋은 성능을 나타낸다. 하지만 문제는 복잡한 SPA에서는 DOM 조작이 많이 발생한다는 것이다. Repaint와 Reflow가 빈번하게 발생하는 웹사이트에서는 UI/UX 렌더링에 비교적 많은 리소스를 잡아먹기 때문에 전체적인 프로세스를 비효율적으로 만든다. Virtual DOM Virtual DOM은 Reflow와 Repaint를 줄여서 브라우저 레이아웃 엔진의 성능에 최적화를 시켜준다. 이게 어떻게 가능할까? 먼저 브라우저에 렌더링을 한 후에 Virtual DOM을 하나 만듭니다. 그리고 변화..

브라우저에서는 Reflow와 Repaint 작업을 진행한다. 이 둘은 웹 애플리케이션의 성능을 떨어뜨리는 주된 요인인데, 한번 천천히 알아보자 DOM Tree HTML을 전달 받은 브라우저는 렌더 엔진에서 이를 파싱하고 DOM 노드로 이루어진 트리인 DOM Tree를 만들어낸다. Style Rules 이어서 외부 CSS 파일과 엘리먼트의 inline 스타일을 파싱해서 메모리 상 Style Rules을 생성한다. Render Tree DOM Tree와 Style Rules을 바탕으로 실제 브라우저 화면에 노출되는 노드에 대한 정보를 가진 Render Tree를 만들어준다. 이때 태그나 display 속성이 none인 태그들과 같이 보이지 않는 노드는 Render Tree를 생성할 때 제외하고 생성된다. L..