[React] 브라우저의 렌더링 과정
·
React/이론
브라우저에서는 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..