브라우저의 작동원리?
초반 브라우저의 기능에 대한 고찰은 그다지 많이 이루어지지 않았었다.
개발자들이 직접적으로 개발하는 주체는 html, css, javascript 였었고
브라우저는 단순히 이들을 렌더링하여 사용자에게 보여주는 역할만을 했었기 때문이다.
하지만 웹 브라우저의 종류가 다양해지면서 브라우저간의 호환성에 대한 이슈가 늘어나기 시작한다.
같은 파일을 다르게 렌더링하여 보여지게 되거나, 이 브라우저에서는 잘 호환이 되다가 저 브라우저에서는
갑자기 오류가 발생해 렌더링이 안된다거나 하는 현상이 생기기도 했다.
그렇게 되다보니 자연스럽게 브라우저의 동작원리에 대해 고찰을 시작하게 되었고, 연구하기 시작하게 되었다.
우리도 기본적으로 간단한 개념정도는 알고있어야 할 듯 하다.
브라우저의 역할?
사용자가 웹 브라우저로 웹 서버에 요청을 한다면, 웹서버가 응답을 하게 된다.
그 후 웹 서버가 브라우저에게 html 을 전달한다면, 브라우저는 그것을 읽고 사용자에게 보여주게 된다.
브라우저가 읽게되는 html 을 해석하는 방법은 결국은 사람이 하는것이고, 각각의 브라우저를 관리하는 기업의
개발자 들이 각각의 브라우저를 각각의 규정에 맞게 개발하고 확장하다보니 브라우저간의 호환성이슈가 나는것도
어찌보면 당연한 이야기 같다.
브라우저의 구조
브라우저의 구조는 다음과 같다.
- User Interface (사용자 인터페이스): 사용자가 직접적으로 접근할 수 있는 영역
- 브라우저 엔진: UI 와 렌더링 엔진 사이의 동작을 제어한다.
- 렌더링 엔진: 브라우저의 핵심, 요청한 컨텐츠를 화면에 표시한다. HTML , CSS 등을 해석해서
표시하는 엔진이다. - 통신: HTTP 요청 같은 네트워크 호출에 사용한다. 브라우저마다 독립적인 interface 이다.
- UI 백엔드: OS 사용자 인터페이스 체계를 사용한다.
- 자바스크립트 해석기: 자바스크립트 코드를 해석한다.
- 자료저장소: Local storage, 브라우저 메모리를 저장하는 영역이다.
렌더링 엔진
렌더링 엔진은 사용자가 요청한 내용을 브라우저 화면에 표시한다, html 및 xml 문서와 이미지를 표시할 수 있다.
개별 플러그인이나 확장기능을 사용한다면 pdf 같은 파일도 표시가 가능하다.
브라우저의 동작과정
- DOM 트리 구축을 위한 html 파싱
브라우저는 화면을 표시하기 위해 서버로 부터 html 파일을 전달받는다, 그렇게 되면 렌더링 엔진이
전달받은 html 문서를 파싱하여 DOM 트리를 구축한다, 그 외의 파일도 파싱한다. - 렌더트리 구축
DOM 트리와 css 정보를 합쳐서 렌더트리를 만든다.
렌더트리? -> DOM + CSSOM 의 형태로, html 과 style이 합쳐져 최종적인 트리가 구성이 되는것.
- 렌더트리 배치
렌더트리의 각 노드에 대해서 화면상에서 어디에 배치가 될것인지 결정한다. - 렌더트리 그리기
UI 백엔드에서 렌더트리를 그리게 되고, 최종적으로 화면에 출력된다.
