브라우저는 어떻게 동작하는가?

 

 

목표

브라우저 주소 창에 naver.com을 입력했을 때 어떤 과정을 거쳐 네이버 페이지가 화면에 보이게 되는지 알게 되기

 

브라우저 렌더링 원리

- DOM, CSSOM 생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다.  --> 단순한 텍스트인 HTML, CSS 파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSDOM으로 만들어진다. (html이 여기서 파싱된다.)

DOM Tree, CSSOM Tree가 만들어진다.

 

- Render Tree 생성: DOM Tree, CSSOM Tree 가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다.

랜더 트리는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다.

 

- Layout 단계: 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생선된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다. (reflow 단계) 레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변화된다.

 

- Paint: Layout 계산이 완료되면 이제 요소들을 실제화면을 그리게 된다. (repaint 단계) 처리해야하는 스타일이 복잡할 수록 Paint 단계에 소요되는 시간이 걸린다. (가령 그라데이션, 그림자 효과 > 단색 배경)

 

 

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다.

자원의 주소는 URI ( Uniform Resource Identifier )에 의해 정해진다.

 

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다.

이 명세는 웹 표준화 기구인 W3C( World Wide Web Consortium ) 에서 정한다.

과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.

 

 브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다.

• URI를 입력할 수 있는 주소 표시 줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

 

브라우저의 기본 구조

• 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
• 렌더링 엔진: 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 표시함.
• 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스 이고 각 플랫폼 하부에서 실행됨.
• UI 백엔드: 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스. OS 사용자 인터페이스 체계를 사용.
• 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행.
• 자료 저장소: 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 지원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

 

그림1 브라우저의 주요 구성 요소

 

 

 

 

출처: https://d2.naver.com/helloworld/59361