HTML에서 화면에 그려지기까지 (feat.DOM, CSSOM)

아래는 얄코님의 영상을 참고하여 공부한 내용입니다.
자세한 내용은 영상을 보시면 됩니다!
https://youtu.be/07Lppn7UdIs?si=i0j8_dAEr8ByNPjT

브라우저에서 어떤 과정을 통해 화면이 그려질까?

1. DOM 트리 생성

• 브라우저가 HTML(비유: 설계도)를 파싱해서 실제 동작할 수 있는 실체(비유: 로봇)를 만드는데 그게 DOM
• 그 실체(DOM)를 Javascript(비유: 리모콘)를 통해 동작함

2. CSSOM 트리 생성

• 브라우저가 스타일을 계산하고 적용할 수 있도록 웹 페이지의 시각적인 스타일을 정의하는 CSS를 트리구조로 만든 것이 CSSOM

3. Render Tree 생성

• DOM과 CSSOM을 결합하여 Render Tree 생성
  • 이 Render Tree는 화면에 실제로 표시할 요소를 결정
  • 화면에 표시할 부분만 포함 (DOM/CSSOM 전체를 포함하지 않음)

4. Layout

• Render Tree의 각 노드 크기와 위치를 계산

5. Paint

• 계산된 정보에 따라 각 요소를 화면에 그림

참고: ‘파싱(Parsing)’한다는 것

• 컴퓨터 과학에서 텍스트 데이터를 분석하고 해석하여 의미 있는 구조로 변환하는 과정
• 웹 개발에서는 HTML, XML, JSON 등의 문서나 데이터를 읽고, 그 내용을 구조화된 형태로 변환하는 것을 의미