웹 브라우저?
웹 브라우저란 사용자가 URL을 통해 웹 사이트에 접근을 하면 해당 서버에 데이터를 요청해
그 데이터를 렌더링하고 화면에 웹을 보여주는 프로그램이다.
웹 사이트를 개발할 때 사용자가 요청을하면 서버에서 데이터를 보내주는 것과 같이
브라우저도 동일한 방식을 하고있다.
브라우저 구성요소
브라우저는 다음과 같이 구성되어있다.
User Interface - 뒤로가기, 새로고침 버튼 같은 브라우저의 UI
Browser Engine - 브라우저 UI와 렌더링 엔진 사이의 동작을 제어
Rendering Engine - HTML과 CSS를 해석하여 표시해주는 역할
Networking - 웹 서버와 통신하게 해주는 네트워크
JavaScript Interpreter - 자바스크립트를 해석하여 실행
UI Backend - UI를 가동시키게 해주는 역할
Data Persistence - 쿠키나 로컬 데이터를 저장시키는 데이터 스토리지
웹 화면이 표시되는 원리
위에서 말했듯이 웹 브라우저에서 주소를 입력하면
해당 서버에 자원을 요청하고, 그 자원을 HTML로 그려 사용자에게 보여주게된다.
이 과정을 렌더링이라고 하는데, 이 렌더링의 상세 과정은
1. 서버로부터 받은 HTML과 CSS를 응답받으면
웹 표준화 기구인 W3C(World Wide Web Consortium)에 의해 해석된다.
이 해석 과정을 파싱이라고한다.
2. HTML과 CSS를 해석하여 DOM Tree와 CSSOM Tree를 생성한다.
3. JavaScript Engine을 통해 스크립트 코드를 해석하여 AST(Abstract Syntax Tree)를 만들고 실행한다.
4. DOM Tree와 CSSOM Tree를 통해 Render Tree를 만든다.
이 과정까지를 Consturction이라고 한다.
5. 렌더링 엔진이 Render Tree의 노드들을 화면에 올바른 위치에 표시하는 Layout 작업을 실행
6. UI Backend가 Render Tree의 노드를 기반으로 UI를 그린다.(Render Tree Painting)
7. 그 다음 레이어를 z-index 순서대로 배치하는 Composition 단계를 수행한다.
Layout 작업부터 Composition까지의 과정을 Operation이라고 한다.
이러한 과정은 서버은 요청했을 때 모든 데이터를 받고나서 수행하지 않고,
먼저 응답받은 데이터 일부를 위 과정을 거쳐 사용자에게 표시하게된다.