[Section2] section2 회고

회고의 내용

섹션2 내용을 다시한번 들여다 보면서 놓쳤던 부분들을 상기하거나 부족한 부분을 다시 정리하는 내용이 되겠다.

 

전체 항목

• 브라우저의 기본 작동 원리
  
  

---

브라우저의 기본 작동 원리

브라우저의 기본 구조

먼저 브라우저의 구성 요소를 그림으로 살펴보자.

각 구성 요소는 다음과 같은 역할을 하고 있다. 물론 구조는 브라우저마다 조금씩 다를 수 있다.

• 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
• 렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
• 통 신: HTTP요청과 같은 네트워크 호출에 사용됨
• JS 엔진: 자바스크립트 코드를 해석하고 실행
• UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림
• 자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스

특히 크롬은 각 탭마다 각자의 자료 저장소를 가지고 있고, 각 탭 하나하나가 프로세스이다.

 

 

 

동작 과정

1. DOM 트리 구축을 위한 HTML 파싱: 브라우저는 서버로부터 HTML 문서를 모두 전달받는다. 렌더링 엔진은 전달받은 HTML 문서를 파싱해서 DOM 트리를 구축한다. 그리고 외부 CSS 파일과 스타일 요소도 파싱한다.
2. 렌더 트리 구축: DOM(Document Object Model) 트리와 스타일 정보를 합쳐서 렌더 트리를 만든다.
3. 렌더 트리 배치: 렌더 트리의 각 노드에 대해서 화면 상에서 어디에 배치할 지 결정한다.
4. 렌더 트리 그리기: UI 백엔드에서 렌더 트리를 그리게 되고, 우리가 보는 화면에 출력된다.

위 사진은 웹킷의 동작 방식이다.

---