Web03 :: browser의 동작
브라우저 엔진 : 소스코드를 화면에 실행해서 보여줌, 브라우저 소프트웨어를 동작시켜주는 핵심엔진
렌더링 엔진 : 화면에 직접 위치 잡고 색칠 해주는, 픽셀단위로 어떤게 그려져서 눈으로 다양한 형태를 볼수가 있다.
데이터 관리 영역 : 브라우저 캐시 를 한다.
브라우저는 http를 통해서 웹 서버 특정 인터넷 주소를 해석한 다음에 그 주소로 통신을 한다.
자바스크립트 인터프레터 : 자바스크립트 코드 해석
UI Backend : UI를 처리하는 백엔드 영역이 있다.
* 렌더링 엔진
파이어 폭스의 Gecko, 사파리엔진의 Webkit, Chrom이 오픈하는 Blink 이런것들이 있다.
브라우저 별로 가지고 있다.
브라우저 엔진의 메인 플로우
HTML 파싱을 한다. 문자단위로 해석을 해서 이 내용 의미 파악.
그것을 데이터객체로 구조화 시킨다.
DOM tree.
HTML은 구조화 된 정보여서 그런것을 해석해서 Document object model 일종에 트리 구조 형태로 데이터를 가지게 된다.
그게 Render tree construction, 렌더 트리를 만들고
렌더 트리를 기준으로 CSS를 합친다.
style 정보와 구조를 합쳐서 매칭을 하게 된다.
화면에 어떻게 배치할지, 첫번째 div 태그는 왼쪽위
이런식으로 그려진다.
화면에 직접 그림을 그리게 된다.
*Main flow examples
(Figure : Webkit main flow)
html 코드를 받고 html 파싱을 하게 된다.
dom 트리라는 계층을 만든다. 화면에 표시하기 위해서 css 코드가 필요하다.
css 파일을 파싱하게 된다.
Attachment : 두가지(html, css)합쳐서 어떤 엘리먼트에 어떤 스타일을 부여하는 작업을 하고 렌더트리를 그린다.
dom 트리별로 어떤 스타일 정보를 가지고있는지
렌더 트리를 객체화 시켜서 (key, value 구조로 소프트웨어 모델) layout 결정하고 배치도리지
화면에 그려지는 작업
(Figure : Mozilla's Gecko rendering engine main flow)
* Parsing-general
2+3-1 을 파싱해야 한다.
해석해서 값을 얻어야 한다.
기본적인 파싱 방법은 2를 분리하고 +라는 연산자 그다음 3 또다시 -라는 어떤 기호
이런것을 분리해서 이것들이 가지는 의미
더하기면 앞과 뒤를 합쳐준다. 이런식으로
그래서 이걸 하나를 토큰이라고도 하는데
이런것들을 기준으로 Syntax tree를 만들고 그 tree에 따라서 어떤 값의 처리가 일어난다.
파싱은 토큰 단위로 다 잘라서 의미를 해석한 다음에 그거에 의미에 따라서 어떤 실행을 해주는것이라고 생각하면된다.
*HTML 파서
<html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body> </html>
이런 코드를 작성할 수 있다.
기본 HTML 형식(a.k.a 마크업)
*마크업이 실제로 브라우저에 보관되는 형식
맨위에 엘리먼트
바디,
바디 안에는 p tag 시작해서 끝나고 div가 시작해서 끝나고 (위 그림과 연관지어 봤을때)
div 아래도 또 이미지 태그가 존재 이런식으로 트리구조를 만들어서 브라우저가 바라보게 된다.
이런것들을 DOM 트리라고 한다.
* CSS 파싱
최상위 오브젝트(CSSStyleSheet) 안에 여러 룰들이 있고
왼쪽에 있는것이 셀렉터 p, div .error 이런것들
오른쪽이 선언(Declaration) 이라고 한다.
이런객체화된 트리구조로 CSS를 가지게 된다.
이런단계를 얻을려면 파싱하는 단계가 필요하다.
브레이서를 찾는다던가, 콜론을 찾는다라던가
값을 매칭시켜주는 단계를 거치게 된다.
*레이아웃
화면을 어떻게 표현하는지
'Web' 카테고리의 다른 글
| Web06 :: HTML Layout 태그 (0) | 2019.01.03 |
|---|---|
| Web05 :: WAS (0) | 2019.01.03 |
| Web04 :: browser에서의 웹 개발 (0) | 2018.12.31 |
| Web02 :: Front-end 와 Back-end (0) | 2018.12.31 |
| 웹의 동작(HTTP 프로토콜 이해) (0) | 2018.12.29 |