브라우저 렌더링 과정에 대한 이해

 

웹개발자라면 반드시 브라우저의 렌더링 과정에 대한 이해가 있어야 된다고 생각해 포스팅 하게 되었습니다.

스스로 기본기가 많이 부족하다고 생각하여 기초를 탄탄히 하기 위해 정리해보게 되었습니다.

 

자, 그럼 브라우저 렌더링 과정에 대해 알아보겠습니다.

 

Browser Rendering Flow

1. 브라우저 주소창에 도메인주소(예 : www.google.com)를 입력한다. 

2. 도메인주소로 해당 서버로 찾아 간다. (구글 서버)

3. 실제 서버가 어디에 있는지 알고 있는 DNS 서버가 연결해 줄 곳을 찾는다.

4. 서버 설정에 지정되어있는 Default HTML을 찾아서 클라이언트로 보내준다.

5. 브라우저는 받은 HTML을 파싱(Parsing)한다.

6. 라인 단위로 읽으면서 DOM (Document Object Model) 트리를 만들어 간다.

7. HTML내 <link/> 태그를 만나 CSS 요청이 발생하면, CSS를 파싱 한 후 다시 HTML을 읽고 DOM트리를 완성한다.

8. 완성된 DOM (Document Object Model) 트리와 CSS 트리를 합쳐 최종 Render Tree 를 만들고 그린다.

 

< Javascript 를 만났을때 >

HTML 중간 Script 태그를 만나면 Javascript 코드를 실행하기 위해 파싱을 중단하고 제어권한을 자바스크립트 엔진에게 넘긴다.

자바스크립트 코드 또는 파일을 로드해서 파싱하고 다시 HTML을 읽고 DOM트리를 완성한다.