브라우저와 동작 원리

브라우저란 동기(synchronous)적으로 HTML,CSS,Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다.

동기적인 이유 > HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다. DOM이 완성되기 전에 script가 DOM을 조작한다면 에러가 발생한다. 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. => script 태그를 body 태그 하단에 위치시키는 이유

 

1. 사용자가 브라우저에 접속한다.

2. DNS를 이용해 IP주소를 파악한다.

3. 브라우저와 서버가 3 way hand shake를 한다.

4. HTTP request를 주고 HTTP response를 받는다

(HTML 서버로 부터 응답받은 HTML문서를 얻는 것으로 렌더링 엔진이 동작하기 시작한다.)

5. HTML파일을 읽어 DOM Tree를 형성한다

6. CSS 파일을 읽어 CSSOM Tree를 형성한다

7. DOM Tree와 CSSOM Tree를 합해 Render Tree를 구축한다.

8. Layout : 렌더 트리의 각 노드를 화면의 올바른 위치에 표시한다.

9. UI backend가 Render Tree의 노드를 돌며 UI를 그린다.

10. composition : 노드들의 레이어를 z-index 순서대로 구성한다.

11. Javascript는 렌더링 엔진이 아닌 Javascript엔진이 처리한다. HTML 파서는 script 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘겨 javascript 파일을 로드하고 파싱하여 실행한다.

12. Javascript의 실행이 완료되면 다시 HTML 파서로 제어권한을 넘겨 DOM 생성을 재개한다.