왜 궁금한가
언어 학습만으로도 기본적인 웹 페이지 개발이 가능했기 때문에 웹 브라우저의 동작 방식에 대해서는 특별한 호기심 없이 javascript에만 집중했다.
하지만 웹 브라우저 간의 호환성 문제가 발생할 경우 의도하지 않은 화면이 구성되는 것을 확인했고 브라우저 동작 원리 이해에 대한 필요성을 느꼈다.
기능
브라우저는 사용자가 원하는 자원을 서버로부터 브라우저에 표시하는 것을 주 목적으로 한다.
여기서 말하는 자원은 HTML 문서가 일반적이나 PDF,이미지 등의 형태 또한 해당될 수 있으며 자원의 주소는 URI에 의해 정해진다.
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해 표시한다. 명세는 W3C(웹 표준화 기구)에서 정한다. 각 브라우저들이 해당 명세로부터 독자적인 방법으로 확장할 당시에는 호환성 문제를 야기했으나 최근 대부분의 브라우저가 표준 명세를 따른다.
구조
-
사용자 인터페이스 : 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
-
브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
-
렌더링 엔진 : 요청한 콘텐츠를 표시
-
통신 : HTTP 요청과 같은 네트워크 호출에 사용된다.
-
UI 백엔드 : render tree를 browser 에 그리는 역할을 담당한다
-
자바스크립트 해석기 : 자바스크립트 코드 해석/실행.
-
자료 저장소 : 자료를 저장하는 계층으로 쿠키나 로컬 스토리지 등의 자료가 저장되는 저장소. 하드디스크에 저장되며 HTML명세등도 이곳에 저장된다.
렌더링
사용자 화면에 내용을 보여주는 것을 말한다.
웹서버로부터 응답받은 내용을 UI상에 나타내주는 렌더링 엔진은 사용자가 요청해서 웹서버가 응답한 HTML문서를 HTML과 CSS로 파싱해서 화면을 구성하게 되며 여러개의 인스턴트를 한 번에 구동할 수 있다.
렌더링 엔진은 웹서버로부터 전달받은 HTML문서를 맨 처음 네트워크 레이어에서 불러온다.
각 브라우저는 기본적으로 다른 렌더링 엔진을 사용한다!
ex) 파이어폭스:Gekco , 사파리:Webkit, 크롬&오페라:Blink(webkit의 일종)
렌더링 엔진 구동 플로우
- HTML 파싱 후 DOM(Document object model)트리 생성
- 렌더 트리 생성
- 렌더 트리 레이아웃 생성
- 렌더 트리 페인팅
