[Web] 브라우저의 렌더링 과정

[웹 브라우저 종류]

 

브라우저의 동작원리와 렌더링 과정에 대해 정리해보고자 한다.

 

브라우저 동작 방식

[브라우저의 동작 방식]

1. 브라우저(클라이언트)의 주소창에서 URL을 입력
2. URL 호스트명(도메인)이 DNS를 통해 IP 주소로 변환
3. 브라우저(클라이언트)는 IP주소를 갖는 서버에게 요청을 전송

 

브라우저 렌더링 과정 

[브라우저의 렌더링 과정]

1. 렌더링 엔진이 HTML(index.html) 을 파싱하는 도중에 외부 리소스를 로드하는 태그, 즉 CSS파일을 로드하는 link 태그, 이미지파일을 로드하는 img 태그, 자바스크립트를 로드하는 script태그 등을 만나면 HTML파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청
2. 이때 link 태그의 href 어트리뷰트를 통해 로드한 CSS 파일이나 style태그 내 CSS를 HTML과 동일한 파싱과정을 거치며 해석하여 CSSOM(CSS Object Model)을 생성
3. 렌더링엔진이 HTML과 CSS를 파싱하여 생성된 DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합 → 렌더트리는 렌더링을 위한 트리구조의 자료구조. 브라우저 화면에 렌더링되는 노드만으로 구성(meta 태그, script태그, display:none 은 미포함)
4. 이후 완성된 렌더 트리는 각 HTML요소의 레이아웃(위치와 크기)을 계산하는데 사용되며 렌더 트리 생성이 완료되면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시하는것을 의미
5. 렌더 트리 배치 이후 렌더 트리를 그리며 화면에 표출

 

참고문헌

• 모던 자바스크립트 Deep Dive