Front-end/부스트코스 : 웹 프로그래밍
[부스트코스] 1. 웹 프로그래밍 기초 : browser의 동작
byolee
2020. 1. 15. 16:49
저번 HTTP 프로토콜에 이어 웹 프로그래밍 기초에 대한 강의를 듣고 정리한 글입니다.
강의 : https://www.edwith.org/boostcourse-web/lecture/16663/
* Browser (브라우저)
브라우저란? World Wide Web(WWW)에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어
* Browser Main Components
브라우저를 이루고 있는 컴포넌트들에 대해 알아보자.
- 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
- Parsing HTML to construct the DOM tree : DOM(Document Object Model)을 생성하기 위해 HTML 태그를 Parsing
- Parsing(파싱) : HTML 태그 하나하나 해석을 해서 의미들을 파악하고 특정 데이터 객체로 구조화하는 것
- Render tree construction : DOM tree 기반으로 렌더 트리를 생성
- Layout of the render tree : 렌더 트리와 CSS를 합침! 스타일 정보와 구조를 매칭시킴
- Painting the render tree : 앞 단계에서 어떻게 display할지 결정을 했다면 화면에 보여주기
* Parsing (파싱)
- 토큰 단위로 잘라서 의미 해석 -> 의미에 따라 특정 실행
- HTML 태그는 수많은 꺾쇠의 연속 ex. <div></div> <span></span>
- HTML은 마크업 언어의 하나
- 마크업이 브라우저에서는 위의 그림과 같은 구조로 구성이 됨
- CSS는 Key-Value의 구조로 작성이 됨
- 회색 박스에서 p.div나 .error와 같은 것들을 셀렉터(selector)라고 하고 오른쪽 margin-top:3px; 같은 것들을 선언(Declaration)이라고 함
참고 사이트 : https://www.html5rocks.com/en/tutorials/internals/howbrowserswork