웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자.
브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다.
이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다.
브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.)
다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은 과정을 거치게 된다.
이과정을 브라우저 별로 상세하게 그려보면,
1) Webkit의 렌더링 동작 과정
2) Gecko의 렌더링 동작 과정
사용하는 용어는 다르지만 유사한 렌더링 과정을 거치는것을 확인할 수 있다.
1. DOM 트리, CSSOM 트리 구축
먼저 DOM 트리과 CSSOM 트리를 구축하기 위해서는 Parsing과정을 거쳐야한다.
Parsing 과정은 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정이다. 결과로 나오는 DOM트리는 파싱트리, 또는 문법트리 (Syntax tree)라고도 한다.
1) DOM (Document Object Model)
이부분을 좀 더 자세히 살펴보면 아래와 같은 과정들을 거치면서 DOM트리를 만들게 된다.
브라우저는 이후 모든 페이지 처리에서 이 DOM을 사용하게 된다.
2) CSSOM (CSS Object Model)
CSS 파싱은 CSS 특성상 자식 노드들이 부모 노드의 특성을 계속해서 이어받는(cascading) 규칙이 추가된다는 것을 빼고는 HTML파싱과 동일하게 이루어진다.
브라우저는 DOM을 생성하는 동안 외부 CSS참조하는 <link>태그를 만나게 되면 브라우저에 리소스를 요청하게되고 CSS의 원시 바이트(raw bytes)가 문자열로 변환된 후 차례로 토큰과 노드로 변환되고 마지막으로 CSSOM이라는 트리구조를 만들게 된다.
CSSOM이 트리 구조를 가지는 이유는 하향식으로 규칙을 적용하기 때문인데, 최종 스타일을 계산할 때 브라우저는 해당 노드에 적용 가능한 가장 일반적인 규칙으로 시작해 더 구체적인 규칙을 적용하는 방식을 취한다.
참고 : JavaScript와 CSS
JavaScript는 파서 차단 리소스(parser blocking resource)로 브라우저는 문서를 파싱하다가 자바스크립트를 만나면 진행하던 파싱을 중단하고 자바스크립트 엔진에게 권한을 넘겨 자바스크립트를 파싱하고 실행한다.
이 때문에 보통 자바스크립트를 <head>태그가 아닌 <body>태그가 닫히기 바로전에 넣게되는데 <script> 태그에 defer속성을 주면 문서 파싱을 증단하지 않고 문서 파싱이 완료된 후에 자바스크립트를 실행하게 할 수 있다.
CSS는 렌더링 차단 리소스(render blocking resource)로 CSS는 렌더링을 할 때 반드시 필요한 리소스이기 때문에 브라우저는 빠르게 CSS를 다운로드하는 것이 좋다. 이에 <head> 태그 안에서 정의하여 빠르게 리소스를 받을 수 있도록 해야한다.
CSS는 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단할 이유가 없지만 자바스크립트에서 스타일 정보를 요청하는 경우, CSS가 파싱 되지 않은 상태라면 스크립트 에러가 발생할 수 있다.
이런 문제를 해결하기 위해 파이어폭스는 로드 중이거나 파싱 중인 CSS가 있는 경우 모든 자바스크립트 실행을 중지하는 반면 웹킷은 로드되지 않은 CSS 가운데 문제가 될 만한 속성이 있을 때에만 자바스크립트를 중단한다.
2. 렌더 트리 구축 (Attachment)
CSSOM 트리와 DOM 트리를 결합하여, 표시해야 할 순서로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 형성한다. 렌더 트리는 화면에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용되고 픽셀을 화면에 그리는 페인트 과정에도 사용된다.
브라우저가 DOM 및 CSSOM을 렌더 트리에 결합하면 렌더 트리는 페이지에 표시되는 모든 DOM 콘텐츠와 각 노드에 대한 모든 CSSOM 스타일 정보를 가진다.
화면에 표시되지 않는 노드들은 렌더 트리에 포함되지 않는다. 예를 들어, <head> 태그와 같은 비시각적 DOM 노드는 렌더 트리에 추가되지 않는다.
뿐만 아니라 CSS로 인해 display 속성에 none 값이 할당된 노드들도 렌더 트리에 추가되지 않지만, visibility:hidden은 렌더 트리에 포함된다. visibility 속성에 hidden 값이 할당된 노드는 화면에 공간을 차지하기 때문이다.
3. 렌더트리 배치 (Layout)
렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산하는 과정으로 Layout (혹은 Reflow)라고 한다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다. 즉, CSS에 상대적인 값인 %로 할당된 값들은 절대적인 값은 px 단위로 변환된다.
4. 렌더 트리 그리기 (paint)
렌더 트리의 각 노드를 화면의 실제 픽셀로 나타내는 과정을 Painting(혹은 rasterizing)라고 하고 Painting 과정 후 브라우저 화면에 UI가 나타나게 된다.
----
참고사이트
- <브라우저는 어떻게 동작하는가>
'WEB' 카테고리의 다른 글
| Reflow, Repaint 와 7가지 렌더링 최적화방법 (2) | 2022.04.25 |
|---|---|
| GraphQL이란 (0) | 2022.02.23 |
| 웹 폰트와 최적화 (0) | 2021.11.30 |
| SVG파일 미리보기 (0) | 2021.10.25 |
| 프로그레시브 웹앱 (PWA) (0) | 2021.08.05 |
