Browser 구조

사용자 인터페이스: 뒤로가기, 앞으로 가기, 주소창 , 새로고침 등 브라우저 위에 유저가 사용할 인터페이스들

브라우저 엔진: 인터페이스와 렌더링 엔진사이의 가교 역할

렌더링 엔진: 컨텐츠들을 화면에 렌더링 해주는 역할

브라우저의 기본적인 구조는 이런식으로 생겼는데 이 전에 우리가 서버에서 page를 받아오는 부분부터 확인을 해봐야 한다.

1. Client 에서 Server로 page를 요청하면 일단 서버는 ip주소를 DNS서버를 통해 매칭을한다.
2. Server는 매칭한 ip주소에서 데이터를 불러온다.
3. Server는 받은 데이터를 Client로 전송
4. 받은 데이터를 인코딩(UTF-8)하여 페이지를 보여준다.

그러면 렌더링 엔진에서 하는 파싱과정을 알아보면

byte로 이루어진 page데이터들을 우리가 아는 html characters로 변경하고 이를 token화 시킨다.

그리고 이 토큰들을 묶어서 DOM 트리에 사용될 노드들로 객체화 시켜준다.

그리고 DOM 트리를 생성해 브라우저에 렌더링 된다.

웹 브라우저는 이러한 과정을 통해 우리에게 화면을 렌더링 해주는데, 추가적으로 중요한 요소들이 있다. 바로 우리의 웹 디자인을 맡는 CSS 와 이벤트 처리를 해주는 javascript 정보들이다.

css는 CSSOM이라는 또다른 DOM 트리를 만들어서 사용한다.
그래서 DOM 트리가 생성된 이후에 DOM은 CSSOM을 기다린다. (여기서 기다리는 시간이 웹사이트 성능에 중요하다.)

DOM + CSSOM = RENDER TREE

여기서 자바스크립트에 관해 한가지 중요한 사실이 있는데 자바스크립트는 html이나 css처럼 객체화 시켜서 tree를 만들지 않는 다는것을 알 수 있다.

브라우저가 렌더링 될때 자바스크립트는 DOM이 생성되는 것을 중단시킬 수 있는데, +
이는 자바스크립트가 노드들을 변경 시킬 수 있는 특성을 가지고 있기 때문이다.

브라우저는 자바스크립트가 변경 시킬 사항들을 한번에 처리한 뒤에 DOM을 생성하는 것이 유리하다고 판단하여 위와 같은 처리를 진행한다는 것이다.
(그래서 script는 항상 최하단에 위치시키라는 말이 나온 것)

렌더링 엔진