브라우저의 동작 과정

웹 브라우저의 구조 및 동작 과정에 대하여 설명합니다.

브라우저의 기본 구조

브라우저의 동작과정

사용자 인터페이스

주소 표시줄 이전/다음 버튼 북마크 메뉴 등등

요청한 페이지를 보여주는 창을 보여주는 나머지 부분

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

렌더링 엔진

요청한 컨텐츠를 표시 ex) HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시

통신

HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고, 각 플랫폼 하부에서 실행된다

UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림.플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

자바스크립트 인터프리터

자바스크립트 코드를 해석하고 실행

데이터 저장소

쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스 가 정의 되어 있다.

브라우저의 동작 과정

브라우저가 HTML, CSS, Javascript 등의 파일을 변환하여 화면에 픽셀 단위로 나타내기 위해 거쳐야 하는 일련의 과정

렌더링 최적화의 과정은 항상 측정을 먼저 하고 최적화를 진행해야 한다.

동작 과정

브라우저의 동작과정

  1. DOM Tree 생성
  2. CSSOM 생성
  3. Render Tree 생성
  4. Render Tree 배치
  5. Render Tree 그리기

Dom Tree 생성

  • HTML의 내용과 속성을 Node로 갖고 각 Node의 관계를 나타내는 트리
  • HTML 문서를 구조화 하여 스크립트 또는 프로그래밍 언어에서 접근 가능한 형태로 제공

CSSOM(CSS Object Model)

  • DOM 생성과 마찬가지로 태그들을 토큰화, 토큰을 Node로 변환하여 CSS Object Model로 변환
  • Cascading Style Sheets는 Body와 같이 페이지 구조상 상위에 있는 HTML 요소의 스타일이 하위 요소에 상속된다는 의미
  • 브라우저가 모든 CSS를 파싱하고 처리할 때까지 페이지가 화면에 그려지지 않는다.

Render Tree

  • DOM + CSSOM, DOM의 Node에 일치하는 CSSOM 규칙을 찾아 연결 »> Attachment
  • 렌더링 트리에는 페이지를 렌더링하는 데 필요한 가시적인 Node만 포함
    따라서, 메타 태그나 스크립트 태그 같은 Node나 display : none 으로 스타일이 지정된 Node는 제외됨
    그러나, visibility : hidden 스타일이 적용된 Node는 보이지는 않지만 공간을 차지하므로, 렌더링 트리에 포함됩니다.
  • Render Tree가 화면에 최종적으로 그려지는 내용이 된다.

Render Tree 배치

  • 브라우저가 화면에 그릴 Node와 해당 Node의 스타일을 계산하여 하나의 그룹으로 묶어서 Render Tree를 만드는 과정
  • Layout은 브라우저가 화면에 그리기 전에 각각의 Node들의 정확한 위치와 크기로 나타내기 위해 계산하는 과정이다. 이때, 모든 상대적인 값(%)은 절대적인 값 (px)로 변환

Render tree 그리기

  • Render Tree의 각 Node를 화면의 픽셀로 나타내는 작업



Thanks to

참고 : Naver D2 - 브라우저는 어떻게 동작하는가?

참고 : 김재균의 기술블로그 - 브라우저 동작원리


© 2019. All rights reserved.