[HTML/CSS] 브라우저 렌더링
1. HTML 파싱 → DOM 트리 생성
1) 브라우저에 어떤 사이트의 주소를 입력하면 그 주소에 있는 서버가 약속되어 있는 HTML 파일을 브라우저로 전송한다. 이때 전송받은 HTML 코드는 8비트의 데이터 형태로 전송된다.(바이트 스트림)
바이트 스트림(Byte Stream)
1 byte를 입출력 할 수 있는 스트림
2) 브라우저는 전송받은 바이트 데이터를 문자로 변환을 하고, 가지고 있는 토큰과 비교를 해서 해당 문자가 HTML 코드인지 확인한다.
토큰(Token)
토큰은 브라우저에 저장되어 있는 HTML의 시작 혹은 종료 태그, 속성과 속성값 등 약속된 여러가지 값들을 의미한다. 즉, 해당 문자가 HTML 코드인지 확인하는 일종의 설명서이다.
토큰화(Tokenization)
토큰을 통해서 문자가 HTML 코드인지 아닌지 확인하는 과정
3) 토큰화 과정을 통해 노드가 생성되는데, 노드는 DOM 트리를 이루는 거대한 구조의 한 단위이다.
작은 노드들이 모여서 하나의 거대한 트리가 되면 이를 DOM 트리라고 한다.
link, img 태그에 다운로드 표시가 있는 이유
브라우저가 DOM 트리를 생성할 때 link, img와 같은 태그를 만나면 해당 태그 안에 명시되어 있는 resource를 다운로드 받기 때문이다.
script node의 경우 일시정지 표시가 있는 이유
DOM 트리 렌더링 과정에서 스크립트 태그를 만나게 되면 브라우저는 DOM 생성을 중단하고 스크립트 태그 안에 들어있는 자바스크립트 코드를 해석하게 된다. 자바스크립트를 해석하는 동안 DOM 트리 생성이 중단된다.
2. CSS 파싱 → CSSOM 트리 생성
-
돔 트리 생성이 끝나면 CSS를 파싱하는데 CSS 파싱과정은 HTML 파싱 과정과 매우 유사하다.
-
브라우저로부터 전달받은 CSS 파일을 문자로 해석하게 되고, 가지고 있는 토큰과 비교를 해서 노드를 발행한다. 이러한 노드들이 모여서 CSSOM 트리(CSS OBJECT MODEL)가 만들어진다.
1) DOM 트리와 CSSOM 트리가 합쳐져서 렌더트리가 생성되는데, 이를 크게 레이아웃 단계라고 표현한다.
2) 레이아웃 단계에서는 DOM과 계산된 스타일을 따라가면서 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생성하게 된다.
주의사항
CSS 속성 중에 display: none 같은 속성이 적용된 요소는 렌더트리 안에 포함되지 않는다. 화면을 읽어주는 스크린 리더와 같은 프로그램들이 display: none 속성이 적용된 요소를 인식할 수 없는 문제가 발생하기 때문에 접근성을 위해서 요소를 숨겨줄 때는 다른 설정을 쓰는 것이 좋다.
3) 레이아웃 단계가 끝나면 페인트 단계가 진행된다. 렌더 트리를 따라서 페인트 기록이 생성되는데, 페인트 기록에는 요소를 렌더링하는 순서, 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈 다음 그 위에 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적인 부분을 그리는 작업이 진행된다.
4) 페인트 단계가 끝나면 마지막으로 컴포지팅 단계가 실행된다. 이 컴포지팅 단계는 우리가 앞서 페인트 단계에서 만들어둔 여러가지 레이어를 스크린에 픽셀로 표현하고, 나누어져 있던 레이어를 하나로 합성해서 페이지를 완성한다.
리플로우와 리페인트
css를 수정해서 화면에 보여지는 레이아웃이 변경되면 브라우저는 렌더 트리를 다시 생성하고 레이아웃 단계에 바로 다음인 페인트 단계도 이어서 실행한다. 브라우저에게 이 레이아웃을 중간에 변경하는 것은 상당히 부담되는 작업이다.
리플로우와 리페인트가 반드시 순차적으로 실행되는 것은 아니다.
일반적으로 브라우저가 화면을 그리는 순서, 레이아웃, 페인트, Composite이 진행되지만 만약, 사용자가 변경한 css 속성이 레이아웃 속성과 상관없고 페인트 속성과만 관련있다면 앞에 있는 레이아웃 단계는 실행되지 않는다.
transform, opacity
- 리플로우와 리페인트 단계 생략 가능
- 리플로우와 리페인트 없이 레이아웃 변경 가능
- DOM 트리를 변경하지 않도록 설계되어 있기 때문에 브라우저는 쾌적하게 화면을 렌더링할 수 있다.
- 정적인 사이트에서 요소의 위치를 단순 배치하는것은 position을 사용해도 괜찮지만, 애니메이션이나 혹은 동적으로 요소의 위치를 이동해야 하는 경우, transform 속성을 사용하는 것이 성능적으로 좋다.
참조
- 제주코딩베이스캠프, (2023. 03. 14), '브라우저는 어떻게 화면을 렌더링할까?', YouTube, https://youtu.be/z1Jj7Xg-TkU
