[부스트코스] 1. 웹 프로그래밍 기초 : browser의 동작

저번 HTTP 프로토콜에 이어 웹 프로그래밍 기초에 대한 강의를 듣고 정리한 글입니다.

강의 : https://www.edwith.org/boostcourse-web/lecture/16663/

 

* Browser  (브라우저)

---

브라우저란? World Wide Web(WWW)에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어

 

 

 

* Browser  Main Components 

---

브라우저를 이루고 있는 컴포넌트들에 대해 알아보자.

 

출처 : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure

 

• The user interface (사용자 인터페이스) : 주소 입력하는 부분, 뒤로 가기나 앞으로 가기 버튼, 북마크 버튼 등 페이지의 윈도우를 제외하고 브라우저가 보여주는 모든 부분
• The browser engine (브라우저 엔진) : 브라우저 소프트웨어를 동작 시켜주는 핵심적인 엔진
• The rendering engine (렌더링 엔진) : 요청받은 컨텐츠들을 디스플레이하는 역할

  • 서로 다른 브라우저는 다른 렌더링 엔진을 갖고 있음!

  • IE (인터넷 익스플로어)는 Trident, Firefox는 Gecko, Safari는 Webkit, Chrome은 Chroimium이라는 렌더링 엔진을 사용함

• Networking : HTTP request와 같은 요청들을 수행하고자 각기 다른 플랫폼들에서 다양한 구현들을 함, 서버와 HTTP로 정보를 주고 받을 수 있는 모듈
• UI backend : UI 영역 처리를 위한 컴포넌트
• JavaScript interpreter : 자바스크립트 코드 해석
• Data storage (데이터 저장소) : 쿠키와 같은 데이터들을 저장해야 함, 파일시스템이나 데이터베이스 등 지원

 

* Rendering Engine Basic Flow

---

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure

 

1. Parsing HTML to construct the DOM tree : DOM(Document Object Model)을 생성하기 위해 HTML 태그를 Parsing
   • Parsing(파싱) : HTML 태그 하나하나 해석을 해서 의미들을 파악하고 특정 데이터 객체로 구조화하는 것
2. Render tree construction : DOM tree 기반으로 렌더 트리를 생성
3. Layout of the render tree : 렌더 트리와 CSS를 합침! 스타일 정보와 구조를 매칭시킴
4. Painting the render tree : 앞 단계에서 어떻게 display할지 결정을 했다면 화면에 보여주기

basic flow 예시 : webkit의 main flow

 

 

* Parsing (파싱)

---

mathematical expression tree node

 

 

• 토큰 단위로 잘라서 의미 해석 -> 의미에 따라 특정 실행 

HTML parser

• HTML 태그는 수많은 꺾쇠의 연속 ex. <div></div> <span></span>
• HTML은 마크업 언어의 하나
• 마크업이 브라우저에서는 위의 그림과 같은 구조로 구성이 됨

parsing CSS

• CSS는 Key-Value의 구조로 작성이 됨
• 회색 박스에서 p.div나 .error와 같은 것들을 셀렉터(selector)라고 하고 오른쪽 margin-top:3px; 같은 것들을 선언(Declaration)이라고 함

render tree

 

참고 사이트 : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork