첫번째로 DOM 생성입니다.
브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자(character)로 변환하고, 이 문자들을 다시 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.
HTML 토큰이 생성되면, 브라우저는 이를 기반으로 DOM 트리를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 부모-자식 관계를 형성합니다. 예를 들어, <body> 태그 아래에 <div>가 있다면, DOM 트리에서도 <body> 노드 아래에 <div> 노드가 있게 됩니다.
두번째로 CSSOM 생성입니다.
브라우저는 CSS 파일을 파싱(parse)합니다. CSS 파일 역시 바이트로 전송되므로, 브라우저는 이를 문자로 변환한 뒤, CSS 규칙으로 나눕니다. 각 CSS 규칙은 선택자(selector)와 선언(declaration)으로 구성되는데, 선택자는 스타일을 적용할 HTML 요소를 정의하고, 선언은 적용할 스타일을 정의합니다.
브라우저는 이 CSS 규칙들을 기반으로 CSSOM 트리를 생성합니다. CSSOM 트리는 DOM과 유사하게 트리 구조를 가지며, 각 노드는 해당 노드에 적용될 스타일 정보를 포함합니다.
세번째로 렌더 트리 생성입니다.
이제 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 화면에 실제로 표시될 요소들로만 구성됩니다. 예를 들어 display: none 속성이 있는 요소는 렌더 트리에 포함되지 않습니다. 이는 렌더 트리가 실제로 화면에 그려질 요소들만을 포함하기 때문입니다.
렌더 트리의 각 노드는 DOM 트리의 요소와 연결되며, CSSOM 트리에서 해당 요소에 적용된 스타일 정보를 포함합니다. 즉, 렌더 트리는 HTML 문서의 구조와 각 요소의 스타일 정보를 모두 포함한 트리입니다.
네번째로 레이아웃입니다.
렌더 트리가 생성된 후, 브라우저는 이 트리를 사용해 각 요소의 정확한 위치와 크기를 계산합니다. 이 과정이 바로 레이아웃(Layout)입니다. 레이아웃 과정에서는 렌더 트리의 각 노드가 화면의 어디에 위치할지, 그리고 얼마나 큰지를 계산하게 됩니다.
이 계산은 화면의 뷰포트(viewport) 크기와 같은 정보에 의존합니다. 예를 들어, 화면 크기가 변경되면 브라우저는 레이아웃 과정을 다시 수행해야 합니다. 이 과정을 흔히 '리플로우(Reflow)'라고 부르는데, 리플로우는 성능에 영향을 줄 수 있으므로 이를 최소화하는 것이 중요합니다.
다섯번째로 페인팅입니다.
레이아웃이 완료되면, 브라우저는 각 요소를 실제로 화면에 그리는 작업을 시작합니다. 이 과정을 페인팅이라고 합니다. 페인팅 단계에서는 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려집니다.
페인팅은 화면에 표시될 그래픽 요소를 생성하는 과정이기 때문에, 이 과정도 성능에 큰 영향을 줄 수 있습니다. 특히, 복잡한 그래픽이나 애니메이션이 포함된 경우 페인트 작업이 많아져 성능이 저하될 수 있습니다.
마지막 단계는 컴포지팅입니다.
브라우저는 화면에 그려질 요소들을 각각의 레이어(layer)로 분리하고, 이 레이어들을 결합하여 최종 화면을 구성합니다. 이 과정에서는 GPU를 활용하여 각 레이어를 빠르게 합성합니다.
transform과 opacity와 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고, 이 컴포지팅 단계에서만 처리됩니다. 이 덕분에 이러한 속성을 사용하는 애니메이션은 더 부드럽고 빠르게 실행될 수 있습니다. 컴포지팅 단계는 GPU 가속을 활용하여 성능을 최적화하고, 화면에 최종적으로 표시되는 결과를 빠르게 생성하는 데 중요한 역할을 합니다.
'1일 1CS(Computer Science)' 카테고리의 다른 글
| 자바스크립트의 얕은 복사와 깊은 복사 이해하기 (0) | 2025.04.07 |
|---|---|
| 트랜잭션 격리수준은 무엇인가요? (0) | 2025.04.07 |
| 리액트에서 성능 최적화를 위해 적용할 수 있는 방법들을 설명해주세요. (0) | 2025.04.04 |
| 인덱스와 PK(Primary Key)의 관계 (0) | 2025.04.03 |
| 데이터베이스 인덱스에 대해서 설명해주세요. (0) | 2025.04.03 |