프론트엔드 개발을 시작한지 얼마 안된 시점이라 할 지라도 HTML 작성은 어려운 일이 아니다.
하지만 내가 작성한 HTML이 어떻게 브라우저에 그려지는지 그 과정을 알아야 할 필요성을 느끼기 까지는 시간이 어느정도 걸린다.
회사 면접 질문으로도 자주 등장하는 브라우저 렌더링 과정은 왜 알아야 하는 것일까?
그리고 어떠한 과정으로 이루어지는 것일까?
이번 글에서는 이에 대해 정리해 보았다.
브라우저
브라우저 렌더링 과정을 알아보기 전에 우선 브라우저가 무엇인지부터 알아보자.
우리가 흔히 사용하고, 알고있는 브라우저는 Chrome, Safari, Firefox 등이 있다.
브라우저는 웹에서 페이지를 찾아서 보여주고, 유저가 선택한 자원을 서버로부터 받아와서 보여주는데, 페이지 이외에도 이미지, 비디오 등의 컨텐츠들도 포함된다.
브라우저 렌더링 과정
먼저 요약부터 하자면, 렌더링 과정은 다음과 같다.
1. Parsing: HTML 파일과 CSS 파일을 각각 파싱해서 Tree(DOM Tree, CSSOM Tree)를 만든다.
2. Style: 두 Tree를 결합하여 Render Tree를 만든다.
3. Layout: Render Tree에서 각 노드의 위치와 크기를 계산한다.
4. Paint: 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
5. Composite: 레이어를 합성하여 실제 화면에 나타낸다.
1. Parsing
Parsing 단계에서는 HTML 파일을 해석하여 DOM Tree를 구성한다.
파싱 중 HTML에 CSS가 포함되어 있다면, CSSOM Tree 구성 작업도 함께 진행한다.
2. Style
Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다.
여기서 Render Tree는 실제로 화면에 그려지는 Tree이다.
보충 설명을 하자면 어떤 컴포넌트가 display:none 되어 있다면, 그 컴포넌트는 Render Tree에 포함되지 않는다.
3. Layout(Reflow)
Layout 단계에서는 Render Tree를 화면에 배치하기 위해 노드의 정확한 위치와 크기(폰트, 이미지, 기타등등의 효과는 Paint에서 계산)를 계산한다.
루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.
크기 값을 %로 지정했다면, % 값을 계산해서 px 단위로 변환한다.
브라우저 렌더 과정 중 가장 많은 리소스를 사용하는 단계이므로, 웹 최적화를 위해서는 Layout이 일어나는 상황을 최대한 줄이는 것이 좋다.
Layout이 일어나는 상황은 다음과 같다.
- 페이지 최초 렌더링
- 뷰포트(브라우저의 순수 화면 영역) 리사이즈
- 노드 추가 / 제거
- 노드의 크기 / 위치 변경
- 폰트 변경, 이미지 크기 변경, 텍스트 내용 변경
4. Paint(Repaint, Redraw)
Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면에 표시할 준비를 한다.
Render Tree에 존재하는 각 요소들: 텍스트, 이미지, 기타 스타일 등을 픽셀로 변환한다.
Paint는 Layout이 일어나면 위치 / 크기 등이 바뀌므로 픽셀을 다시 그려줘야 한다.
당연한 얘기지만, 스타일이 복잡할 수록 Paint 시간도 늘어난다. (ex. 단색 배경보다 그림자 효과가 시간이 더 필요하다.)
5. Composite
Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.
브라우저 렌더링 과정은 왜 알아야 하는가?
브라우저 렌더링 과정을 정리해보면서 이 과정을 알아야 하는 이유를 말해보라 한다면,
최적화를 위해 알아야 한다. 라고 대답할 수 있을 것 같다.
아직은 그것 밖에는 답할 이유가 생각나지 않는다.
그렇지만 꽤나 중요한 이유라고 생각한다.
최적화를 위해 초점을 두어야 할 단계는 Layout과 Paint인 것 같다.
Layout 단계는 리소스가 많이 들기에 자주 일어나지 않게 하는 것이 중요하며, 이를 위해서는 Layout과 Paint가 일어나는 상황에 대해 상세하게 알고 있어야 하겠다.
