[WEB] 브라우저 동작 방법

 이전에 했던 웹 동작 방식은 사용자가 url을 입력한 후 url을 서버로 어떻게 받는지를 봤다면 브라우저 동작 방법은 url을 입력했을 떄 어떤 과정을 거쳐 브라우저 페이지가 화면에 보이는 지에 대한 방법이다.

 

브라우저는 사용자가 선택한 자원을 서버에 요청한 뒤 브라우저에 표기한다. 자원은 html, pdf, 이미지 등 다양한 형태로 이뤄져 있고, 자원의 주소는 URL에 의해 정해진다.

 

브라우저가 가진 인터페이스는 보통 URL을 입력하는 주소 표시줄, 이전.다음 버튼, 북마크, 새로고침 버튼, 홈 버튼 등이 있다.

 

브라우저 기본 구조

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작 제어

렌더링 엔진

요청한 콘텐츠 표시 (html 요청이 들어오면? → html, css 파싱해서 화면에 표시)

통신

http 요청과 같은 네트워크 호출에 사용 (플랫폼의 독립적인 인터페이스로 구성되어있음)

UI 백엔드

플랫폼에서 명시하지 않은 일반적 인터페이스. 콤보 박스 창같은 기본적 장치를 그림

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행

자료 저장소

쿠키 등 모든 종류의 자원을 하드 디스크에 저장하는 계층

 

렌더링

 웹을 보다 보면 렌더링이라는 말을 많이 쓰는데 렌더링이란 웹 페이지 접속 시 페이지를 화면에 그려주는 것이다. 

렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시해주는데 기본적으로 html, xml 문서와 이미지를 표시 할 수 있다. 

 

렌더링 동작 과정

브라우저의 렌더링 순서를 간략하게 표현한 이미지이고 아래는 그 과정을 설명한 것이다. 

1. 렌더링 엔진이 전달받은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
2. 외부 CSS 파일과 함꼐 포함된 스타일 요소를 파싱한다.
3. DOM 트리와 파싱된 스타일 요소를 합쳐 렌터 트리를 구축한다.
4. 렌더 트리의 각 노드에 대해 화면 어디에 배치할지 결정한다.
5. UI 백엔드에서 렌더 트리를 각 노드를 그린다.

DOM

1. 코드를 어휘 분석을 통해 html에 지정된 토큰으로 변환한다 

  ex. StartTag html이라는 태그는 html이 열렸다라는 의미를 가지고, Endtag body는 body태그가 닫혔다는 의미를 가진다.

 

 

 2. 브라우저 렉싱과정을 통해서 토큰이 해당속성과 규칙을 정의하는 노드객체로 변환된다.

 

3.  각 노드가 서로 연관성을 가질수 있도록 트리를 생성하는데 이게바로 DOM트리이다.
HTML에 있는 모든 것들은 이 DOM을 구성하는데, 먼저 최상위에는 document 객체가 들어간다.
태그는 element 노드가 되고, 태그의 요소는 attribute 노드, 텍스트는 text 노드가 되어 트리구조를 생성한다. 이외의 주석도 comment 노드가 되어 생성된다.

CSSOM

브라우저는 html을 DOM으로 만들면서 개발자가 정의해놓은 CSS와 기번적으로 설정되어있는 CSS를 cascading rule에 따라서 병합하여 CSSOM을 만들게 된다.

Render Tree

브라우저가 html파일을 읽으면 제일 먼저 DOM Tree를 만들고 그 다음 CSS파일을 읽은 다음 최종적으로 확정된 CSS Style tree를 만든다. 이후 브라우저에서 표시 될 요소들만 Render Tree에 선별해서 표시한다. 즉, DOM + CSSOM = Render Tree인 것이다.

- Render Tree를 빠르게 만들 수 있는 방법

심플하게 보자면 DOM요소와 CSS규칙이 적을수록 빠르다. 즉, html의 경우 div태그의 남용 쓸데없는 wrapping등 불필요한 태그 사용을 자제하는것이 방법이 될 수 있다.