렌더링

브라우저 렌더링 과정 및 사이드 이펙트 살펴보기

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite) Par..