브라우저란?

인터넷에 접속하기 위해 이용되는 소프트웨어이다. HTML 언어로 작성하면 브라우저가 번역을 하여 우리에게 보여준다.

참고로 파이어폭스는 게코(Gecko)를 사용하고 있고 사파리는 웹킷(Webkit)을 사용하고 있다.

렌더링 과정

1. HTML/CSS 파싱 후, DOM/CSSOM 트리 구축

가장 첫번째 단계는 서버로부터 받은 HTML, CSS를 다운로드 받는다. 각각 DOM Tree와 CSSOM으로 만들어진다.

2. JS실행

HTML 중간에 스크립트가 있다면 HTML중단이 되고 JS을 다운로드하고 완료되면 다시 중단된 부분부터 파싱한다. => body 이후에 스크립트를 넣어야 하는 이유!

3. DOM과 CSSOM을 조합하여 렌더트리 구축

display:none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.

4. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 후 화면에 그린다.