브라우저의 동작원리에 대한 네이버 포스트를 요약하여 사내 스터디에서 발표한 자료

1. 브라우저는 어떻게 동작하는가? (정리)
https://d2.naver.com/helloworld/59361

2. 브라우저의 주요 기능
• 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시
• 브라우저는 HTML과 CSS명세에 따라 HTML파일을 해석해 표시
• 웹 표준화 기구 : W3C
• 일반적 유저 인터페이스
• URI를 입력할 수 있는 주소 표시 줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

3. 브라우저의 기본 구조

4. 렌더링 엔진
• 크롬, 사파리 : 웹킷(Webkit) 엔진
• 파이어폭스 : 게코(Gecko) 엔진

5. 렌더링 엔진 동작 과정
이 과정은 순서대로 진행되지만, 빠른 처리를 위해 모든 HTML이 파싱될 때까지 기다리지 않고
완료된 것들 먼저 배치와 그리기를 시작한다.

6. 웹킷 렌더링 엔진 동작 과정
CSSOM

7. HTML 파싱
• 전통적인 파서로는 HTML을 파싱할 수 없음
• 이유 : 문법에 너그러운 HTML, document.write같은 스크립트
• Ex) 태그 안 닫아도 됨
=> 브라우저는 HTML파싱을 위해 별도의 파서를 생성

8. HTML 파싱 과정

9. HTML 파서 오류 처리
• HTML파서는 여러 문법 오류 케이스에 대해 예외 처리를 해줌
<table>
<table>
<tr><td>inner table</td></tr>
</table>
<tr><td>outer table</td></tr>
</table>
<table>
<tr><td>outer table</td></tr>
</table>
<table>
<tr><td>inner table</td></tr>
</table>

10. CSS파싱
• HTML과는 달리 CSS는 정규표현식으로 표시 가능하고, 전통적
인 상향식/하향식 파서로 파싱이 가능함
• 웹킷 : 상향식 파서 / 파이어폭스 : 하향식 파서