사용자가 페이지를 요청했을 때, 브라우저는 어떻게 화면을 보여주는 걸까?
평소에 'HTML을 작성하고 실행시키면 그냥 되는구나~' 했었는데, 궁금해져서 찾아보았다.
깊이 들어가기엔 너무 복잡하니, 이번에는 살짝 맛만 보고 넘어가 보자!😋
통신
일단, 어떤 페이지가 보고싶다면 먼저 서버에 요청을 해야한다.
브라우저의 검색창에 https://velog.io/@jaeung5169와 같이 url을 입력하는 것이 요청에 해당하며, 서버는 사용자의 요청에 따라 응답을 하게 된다.
응답으로 받은 HTML은 화면에 바로 렌더링 할 수는 없고, 브라우저가 가진 렌더링 엔진을 통해 몇 가지 과정을 거쳐서 보여지게 된다.
렌더링 엔진 동작 과정
렌더링 엔진은 브라우저(Google Chrome, Mozilla Firefox, Safari)마다 사용하는 용어 등 조금씩 차이가 있지만, 기본적인 동작 과정은 아래와 같다.
파싱(Parsing) 및 DOM, CSSOM 생성
먼저, 브라우저가 이해하고 사용할 수 있도록 파서(Parser)를 이용한 파싱 과정을 거친다.
HTML과 Style Sheet에 사용되는 파서는 서로 다르며, 각각 파싱 과정을 거치면 최종적으로
HTML은 DOM(Document Object Model), Style Sheet는 CSSOM(CSS Object Model)로 변환된다.
두 모델은 모두 아래처럼 트리 구조로 되어있다.
렌더 트리(Render tree) 생성
위에서 생성한
DOM과CSSOM트리를 이용해 실제 렌더링에 사용할 트리를 생성한다. 이 과정을 Attach 라고 한다.
script 혹은 meta 태그처럼 렌더링에 반영되지 않는 노드들은 렌더 트리에서 생략되며, CSS에 의해 숨겨진 노드 또한 생략된다.
위의 그림을 보면 p 노드의 하위에 있던 span 노드가 CSS의 display:none 속성에 의해 렌더 트리에서 생략된 것을 볼 수 있다.
visibility:hidden 속성은 단지 요소를 눈에 보이지 않게 숨기기만 할 뿐, 레이아웃에 공간은 할당된 상태이므로 생략되지 않으니 주의하자!
레이아웃(Layout)
이전에 생성된 렌더 트리를 토대로, 뷰포트 내에서 노드의 정확한 위치와 크기를 계산하는 단계이다.
이 단계에서 상대적인 단위들(%, vh, vw.....)은 모두 px 단위로 계산된다.
레이아웃의 변화가 생기는 경우 계산을 다시 하기 때문에, Reflow라고 부르기도 한다.
페인트(Paint)
Layout혹은Reflow단계에서 계산이 완료되었다면 이제 화면에 그리는 일만 남았는데, 이 단계를 Paint 라고 한다.
Paint 단계에 걸리는 시간은 단순하고 작은 규모의 문서일수록 빠르며, 그라이데이션 같은 고급 효과를 사용하거나 문서의 규모가 클수록 오래걸린다.
레이아웃에 변화(resize)가 생겨서 Reflow가 발생한다면, 브라우저에 다시 렌더링 해야하기 때문에 Paint도 다시 해야하는데, 이 과정을 Repaint 라고 한다.
주의할 점!
script 태그는 렌더링 엔진이 아니라 자바스크립트 엔진에서 처리하게 되는데, DOM 파싱 중에 script 태그를 만나면 자바스크립트 엔진으로 제어 권한을 넘기게 된다.
이 과정은 동기식으로 처리되기 때문에 DOM 생성이 지연되게 만들고, 스크립트가 실행된 뒤에 생성되는 노드에 접근하려다 에러가 발생하는 경우가 생기기도 한다.
body 태그의 최하단에 script 태그를 쓰는 것이 이러한 이유 때문이다.
또한 Layout 단계에서 레이아웃의 변화가 일어나 Reflow가 발생하면 렌더링 성능을 저하하므로, Reflow가 발생할 수 있는 원인을 최소화 하는 것이 좋다!
참고 자료
브라우저는 어떻게 동작하는가?
객체 모델 생성 | Web Fundamentals
렌더링 트리 생성, 레이아웃 및 페인트 | Web Fundamentals
브라우저 동작 원리 | PoiemaWeb
