최근에 휴직을 오래하다보니 개발 공부를 너무 소홀히 했다는 생각이 들어 면접준비할 겸 CS공부를 다시 하기 시작했다. 프론트엔드 면접질문 중에 기본적인 질문인 '브라우저 렌더링 과정'에 대해 정확하게 개념을 정립하고자 주소창에 google.com을 입력했을 때 일어나는 일에 대해 공부하였다.
사실 지난번에 면접을 볼 때 이 질문이 나온적이 있지만, 명확하게 답을 하지못해서 내가 아직 브라우저 렌더링 과정을 정확하게 이해하지 못하고 있다고 생각했다.
그래서 이번 시간에는 브라우저 렌더링 과정에 대해서 공부하고 정리해보려고 한다.
목차
- 브라우저
- 브라우저 렌더링 동작 과정
- Parsing
- Style
- Layout/Reflow
- Painting
- Composite
- 파싱이 끝난 이후의 동작
- 스크립트와 스타일 시트의 진행 순서
- 스크립트
- 스타일 시트
- 마무리
브라우저
브라우저 렌더링 과정을 알아보기전에 먼저 간략하게 브라우저에 대해서 알아보자.
브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.
MDN에서는 브라우저에 대해 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 설명하고 있다. 여기서 중요하다고 생각하는 부분은 찾아서 보여준다는 것이다.
브라우저는 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들을 렌더링 과정을 통해 유저에게 보여주게 된다.
브라우저 렌더링 동작 과정
렌더링의 기본적인 동작 과정은 다음과 같다.
- HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
- 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
- Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
- 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
- 레이어를 합성하여 실제 화면에 나타낸다. (Composite)
그림으로 표현하자면 아래와 같다.
각 단계를 좀 더 자세하게 알아보자.
Parsing
브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.
파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.
Style
Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다.
예를 들면 Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.
Layout
Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.
루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.
Paint
Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.
당연한 말이지만 스타일이 복잡할수록 Paint 시간도 늘어난다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.
Composite
Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.
파싱이 끝난 이후의 동작
HTML 파일과 CSS 파일을 파싱하는 과정을 거치면서 브라우저는 문서와 상호작용할 수 있게 되고 문서 파싱 이후에 실행되어야 하는 "지연(defer)" 모드 스크립트를 파싱하기 시작한다.
스크립트와 스타일 시트의 진행 순서
스크립트
웹은 파싱과 실행이 동시에 수행되는 동기화(synchronous) 모델이다.
스크립트가 실행되는 동안 문서(HTML)의 파싱은 중단 ➡️ script 태그를 만나면 코드 실행을 위해 DOM 생성 프로세스 중단
스크립트가 외부에 있는 경우 우선 네트워크로부터 자원을 가져와야 하는데 이 또한 실시간으로 처리되고 자원을 받을 때까지 파싱은 중단 된다.
스크립트를 "지연(defer)" 으로 표시할 수 있는데 지연으로 표시하게 되면 문서 파싱은 중단되지 않고 문서 파싱이 완료된 이후에 스크립트가 실행된다. ➡️ 즉, HTML 구문 분석이 완료되면 스크립트 파일이 실행된다.
HTML5는 스크립트를 비동기(asynchronous)로 처리하는 속성을 추가했기 때문에 별도의 맥락에 의해 파싱되고 실행된다.
스타일 시트
이론적으로 스타일 시트는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단할 이유가 없다.
그러나 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제가 될 수 있다.
➡️ 스타일이 파싱되지 않은 상태라면 스크립트는 잘못된 결과를 내놓기 때문에 많은 문제를 야기할 수 있기 때문이다.
이런 문제는 흔치 않은 것처럼 보이지만 매우 빈번하게 발생한다고 한다.
(파이어폭스는 아직 로드 중이거나 파싱 중인 스타일 시트가 있는 경우 모든 스크립트의 실행을 중단한다. 한편 웹킷은 로드되지 않은 스타일 시트 가운데 문제가 될만한 속성이 있을 때에만 스크립트를 중단한다)
마무리
오늘은 브라우저 렌더링 동작 과정에 대해 정리하는 시간을 가져봤다.
면접 때, 브라우저 렌더링 과정에 대한 질문을 받고 나름 준비를 했다고 생각했음에도 말을 제대로 하지 못해 버벅거렸던 내 과거의 시간을 생각하면서 머릿 속으로 이 내용을 요약하여 설명하는 나를 그려보았다. 물론 글만큼 줄줄 말이 나오진 않지만 포스팅을 하게 되면 아무래도 한 번 이상 읽게 되고, 상상에서 말하는 시뮬레이션을 거치기 때문에 좀 도움이 되지 않을까 생각한다.
이 글을 쓰기까지 여러 포스팅 자료들을 살펴봤는데 어떤 블로그에서 naver d2 - 브라우저는 어떻게 동작하는가? 포스팅을 읽어보는 걸 추천한다고 남긴 것을 보았다. 나는 아직 확인해보지 않았는데 한번 더 머릿속을 정리하기 위해서 참고해보는 것이 좋겠다.
참고 자료
MDN - 브라우저
wikipedia - 웹 브라우저
naver d2 - 브라우저는 어떻게 동작하는가?
toast - 성능 최적화
브라우저 렌더링 과정 이해하기
