[CS] Browser 렌더링 과정

⭐ 정리

💡 브라우저 렌더링은 1. 사용자가 브라우저를 통해 웹 사이트에 접속 2. 브라우저는 서버로부터 필요한 리소스(HTML, CSS, Javascript)를 다운 3. HTML DOM tree를 구축 4. CSSOM tree 구축 5. Render Tree 구축 6. Layout 7. Paint 의 과정을 거칩니다.

✅ 사전지식

• 브라우저
  • 우리가 흔히 인터넷에 접속할 때 사용하는 크롬, 사파리, 파이어폭스 등을 말함
  • 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여주는 역할을 수행

1. 요청

• 로더(Loader)가 서버로부터 전달받은 리소스 스트림을 읽는 과정

2. 트리생성(DOM, CSSOM)

!

• HTML파일과 CSS파일을 파싱(해석)해서 각각의 트리를 생성
  • HTML/XML 파서가 문서를 파싱 ⇒ DOM Tree 생성
  • CSS 파서 ⇒ CSSOM 트리 생성
• 생성된 DOM과 CSSOM을 결합하여 Rendering Tree 생성
• DOM 트리 + CSSOM 트리 = Rendering 트리
  • 렌더링에 필요한 노드만 선택해 페이지를 *렌더링하는데 사용
  • Render Tree는 실제로 화면에 그려질 트리
• 렌더링
  • 서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주는 것

3. CSS, 레이아웃 ⇒ Layout

• Render Tree를 토대로 그려질 노드와 스타일, 크기를 계산
  • 렌더링 트리에서 위치, 크기 등을 알 수 없기 때문에 객체들에게 위치 크기 등을 전함
  • 화면에 어떻게 배치해야할지 노드의 정확한 위치와 크기를 계산
• CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정

4. 그리기 ⇒ Paint, Composite

• Layout 단계에서 계산된 값을 이용하여 렌더 트리의 각 노드를 실제 픽셀로 변환
  • 픽셀로 변환된 결과는 하나의 레이어가 아닌 여러 개의 레이어로 관리
• 실제로 그리는 작업을 실행

참고
jaaman.log
tecoble.techcourse
coding_daum.log