[WEB] Browser 동작 방식
Browser란?
WWW에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어.
Browser의 주요 기능
HTML, CSS 등의 파일을 해석하여 화면에 표시한다.
자원은 일반적으로 HTML 문서이지만 이미지 등 다른 유형의 콘텐츠일 수도 있으며, 자원의 위치는 URI를 이용하여 사용자가 지정한다.
Browser의 구조
1. 사용자 인터페이스(User Interface)
주소 표시줄, 뒤로/앞으로 가기 버튼, 북마킹 메뉴 등이 포함된다.
2. 브라우저 엔진(Browser Engine)
UI와 렌더링 엔진 간의 작업을 마샬링한다.
※ 마샬링
한 객체의 메모리에서의 표현방식을 저장 또는 전송에 적합한 다른 데이터 형식으로 변환하는 과정이다.
또한 이는 데이터를 컴퓨터 프로그램의 서로 다른 부분 간에 혹은 한 프로그램에서 다른 프로그램으로 이동해야 할 때도 사용된다.
3. 렌더링 엔진(Rendering Engine)
요청된 콘텐츠를 화면에 표시하는 것을 의미하며
예를 들어, 요청된 콘텐츠가 HTML인 경우 HTML, CSS를 파싱하고, 파싱된 콘텐츠를 화면에 표시한다.
브라우저 별로 각기 다른 렌더링 엔진을 사용한다.
∎ Internet Explorer - Trident
∎ Chrome - Chromium
∎ Firefox - Gecko
∎ Safari - Webkit
∎ Opera - Blink
4. 네트워킹(Networking)
HTTP 요청과 같은 네트워크 호출을 위해 필요하다.
5. UI Back-End
기본 위젯을 그리는 데 사용된다.
6. JavaScript Interpreter
JavaScript 코드를 해석하고 실행하는 데 사용된다.
7. Data Storage
지속성 레이어로, 브라우저는 쿠키와 같은 모든 종류의 데이터를 로컬로 저장해야 할 필요가 있다.
Rendering Engine의 처리과정
HTML을 토큰 단위로 해석해서 DOM Tree를 만들고, CSS를 해석해서 CSS Tree를 만든다.
DOM Tree와 CSS Tree는 Render Tree로 조합되며 조합된 결과는 화면 배치에 필요한 정보를 담고 있다.
Render Tree 정보를 통해 Painting과정에서 화면 색칠을 하게 된다.
HTML Parser
1 2 3 4 5 6 7 8 | <html> <body> <p> Hello World </p> <div> <img src="example.png"/></div> </body> </html> | cs |
HTML 코드를 파싱하게 되면 아래와 같은 트리구조로 만들어 브라우저가 처리하게 된다.
※ Parsing
문서를 파싱한다는 것의 의미는 코드를 사용할 수 있는 구조로 변환하는 것을 의미한다.
토큰단위로 잘라서 의미를 해석한 다음, 의미에 따른 실행을 해주는 것이다.
참고자료
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/