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