브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷(Webkit)이나 게코(Geko) 등과 같은 렌더링 엔진을 사용합니다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하여 다음 단계들로 이루어집니다.
1. HTML을 파싱 후, DOM 트리를 구축합니다.
2. CSS를 파싱 후, CSSOM 트리를 구축합니다.
3. JavaScript를 실행합니다. 단, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다.
4. DOM과 CSSOM을 조합하여 렌더트리를 구축합니다. 단, display: none; 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다.
5. 뷰포트 기반으로 렌터트리의 각 노드가 가지는 정확한 위치와 크기를 계산합니다. (Layout 단계)
6. 계산한 위치/크기를 기반으로 화면에 그립니다.(Paint 단계)
용어 정리
렌더링
HTML, CSS, Javascript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정입니다.
렌더링 엔진
브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있습니다. 크롬은 블링크(Blink), 사파리는 웹킷, 파이어폭스는 게코라는 렌더링 엔진을 사용합니다.
CRP(Critical Rendering Path, 중요 렌더링 경로)
브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변화하는 일련의 단계를 말합니다. CRP는 DOM, CSSOM(CSS Object Model), 렌더트리, 레이아웃을 포함합니다.
파싱
파싱은 하나의 프로그램을 런타임 환경(ex. 브라우저 내 자바스크립트 엔진)이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미합니다. 즉, 파싱은 문서의 내용을 토큰(token)으로 분석하고, 문접적 의미와 구조를 반영한 파스 트리(parse tree)를 생성하는 과정입니다.
DOM
웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는(메모리에 보관할 수 있는)객체를 의미합니다. DOM은 HTML과 스크립팅 언어(javascript)를 서로 이어주는 역할을 합니다.
CSSOM
css를 파싱하여 자료를 구조화한 것입니다. 즉, DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것입니다.
렌더 트리
CSSOM과 DOM 트리의 결합으로 만들어집니다. 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout)를 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트, 즉 화면에 요소들을 표현하는 프로세스를 위해 존재합니다.
Layout
뷰포트 내에서 노드의 정확한 위치와 크기를 계산합니다. 경우에 따라 Reflow라고도 합니다.
Reflow
사용자가 웹 페이지에 처음 접속 하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 된다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 영향을 받는 노드에 대해 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 됩니다. 이러한 과정을 reflow라고 합니다.
다시말해, 리플로우는 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것입니다.
리플로우가 일어나는 대표적인 속성: position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
Paint
노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계입니다. 이 단계를 흔히 페인팅 또는 레스터화라고 합니다.
Repaint
reflow 된 결과를 화면에 그리기 위해서 수행하는 페인팅 단계를 말합니다.
단, 기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우-리페인트가 일어나는 것은 아닙니다. 레이아웃에 영향을 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우 수행 없이 바로 리페인트만 수행하게 됩니다. (참고로 리플로우가 일어나면 반드시 리페인트가 일어납니다.)
리페인트가 일어나는 대표적인 속성: background, color, text-decoration, border-style, border-radius
HTML 코드가 DOM 트리로 변환되는 과정 - 1단계
1. 변환: 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(ex. UTF-8)에 따라 개별 문자로 변환합니다.
2. 토큰화: 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환합니다.
3. 렉싱: 방출된 토큰은 해당 속성 및 규칙을 정의하는 객체로 변환됩니다.
4. DOM 생성: 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결됩니다.
브라우저는 HTML 마크업을 처리할 때마다 위의 모든 단계를 수행합니다.
CSSOM 트리 생성 - 2단계
HTML과 마찬가지로 외부 css 파일에 정의된 스타일과 style 태그에 작성된 스타일을 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 합니다.
DOM 트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성합니다.
렌더 트리 생성 - 4단계
DOM 트리와 CSSOM 트리의 결합으로, 페이지를 렌더링하는데 필요한 노드만 포함합니다.
레이아웃 - 5단계
뷰포트 내에서 각 요소의 위치와 크기를 정확하게 캡처하는 Box 모델이 출력된다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다.
참고자료
질문이나 잘못된 점은 댓글로 남겨주세요 :)💖
'CS > 그 외' 카테고리의 다른 글
| HLS(HTTP 라이브 스트리밍)와 m3u8 (0) | 2024.06.23 |
|---|---|
| OAuth 인증 과정 (0) | 2024.01.24 |
| 인증과 인가 (0) | 2024.01.23 |
| 프론트엔드 입장에서 바라본 Socket과 WebSocket (0) | 2024.01.12 |
댓글