-
웹 브라우저의 동작 순서 :: 마이구미웹 관련 2017. 8. 18. 15:29반응형
이 글은 네이버 helloworld 사이트에 있는 "브라우저는 어떻게 동작하는가?" 의 정리본이다.
"웹 브라우저는 어떻게 동작하나? 1편, 2편" 또한 참고하였다.
브라우저의 구성 요소는 다음과 같다.
- 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼과 같은 조작할 수 있는 부분
- 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
- 렌더링 엔진 - 요청 콘텐츠 표시(화면 표시)
- 통신 - HTTP 요청 호출
- UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림 (* 콤보 박스 == <select> 태그)
- 자바스크립트 해석기 - 자바스크립트를 해석 및 실행
- 자료 저장소 - 자료를 저장하는 계층. 쿠기를 저장하는 것과 같이 모든 종류 자원을 하드디스크에 저장. ex) HTML5 -> 웹 데이터 베이스
브라우저의 동작은 렌더링 엔진의 동작 과정을 이해하면 된다.
렌더링 엔진의 대해서는 이전에 작성된 글을 참고바란다. 렌더링 엔진 참고
다음은 기본적인 렌더링 엔진의 동작이다.
자세한 실제 동작 과정은 다음과 같다.
웹킷 기준으로 된 그림이지만, 명칭은 다를 수 있지만, 동작 과정은 모든 엔진이 아래와 같다.
HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.
변환된 파싱 트리가 우리가 알고 있는 DOM 트리인 것이다.
예를 들어, 다음 HTML 코드를 DOM 트리로 나타내면 다음과 같다.
<html>
<body> <p>Hello World</p> <div><img src="example.png" /></div> </body> </html>이와 같은 형태로 DOM 트리를 만들어진다.
그 후 렌더 트리를 만들게 된다.
DOM 트리는 HTML 문서의 내용을 트리 형태로 나타낸 것이다.
그렇기에 실제 화면에 표시하기 위해서는 다른 형태의 구조가 필요하다.
즉, DOM 트리는 내용 자체를 저장하고 있고, 화면에 표시하기 위한 내용을 저장하는 별도의 트리가 존재해야한다.
이를 렌더 트리라고 한다.
DOM 트리와 CSS 파서를 통해 파싱한 내용을 이용해 어테치먼트 과정을 통해 렌더 트리를 생성하게 된다.
*어테치먼트(attachment)는 DOM 노드와 시각 정보를 연결하는 과정이다.
이렇게 생성되는 렌더 트리는 다음과 같다.
생성된 렌더 트리는 레이아웃 과정을 거친다. (위 그림에서 "배치"에 해당한다.)
이 과정에서 렌더 객체의 위치와 크기를 갖게 된다.
그리기 단계(paint)는 화면에 내용을 표시하기 위한 렌더 트리가 탐색된다.
색을 입히는 과정이라고 볼 수 있다.
렌더 객체의 기본 클래스인 RenderObject 클래스를 참고하자.
class RenderObject { virtual void layout(); virtual void paint(PaintInfo); virtual void rect repaintRect(); Node * node; //the DOM node RenderStyle * style; // the computed style RenderLayer * containgLayer; //the containing z-index layer }
이 과정을 이해하면, Virtual DOM의 나온 배경과 장점을 이해하는데 도움이 된다.Virtual DOM은 이전 글을 참고하자. => "Virtual DOM이란 무엇인가"반응형'웹 관련' 카테고리의 다른 글
Robots.txt vs Meta Robots Tag :: 마이구미 (0) 2021.11.06 SVG 는 언제 써야하는가? :: 마이구미 (0) 2018.01.14 네이버 쇼핑 파트너존 DB URL 구축 :: 마이구미 (0) 2016.12.25 robots.txt 파일에 대해 자세히 보기 :: 마이구미 (2) 2016.07.17
