브라우저 렌더링 진행과정

이 글은 의외로 신입이 모르는 것! - 브라우저 렌더링 과정 을 이해하기 위해 작성된 글 입니다.
작성자 분 정말정말로 감사감사합니다..

1. 브라우저 주소창에 특정 주소 입력

브라우저 주소창에 위와 같이 특정 주소를 입력한다.

2. 해당 주소의 서버를 찾아간다. DNS가 실제 서버가 있는 곳으로 연결해준다. 이때 http, https 각 조건에 맞는 방식으로 통신한다.

DNS (Domain Name System)

• 도메인을 IP 주소로 변환시켜 준다.
  ex) www.amazon.com <-> 192.0.2.44
• 전화번호부 역할을 한다. (도메인과 IP주소 둘 다 알고있음)

HTTP/HTTPS

HTTP (Hyper Text Transfer Protocol)

• 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜

HTTPS (Hyper Text Transfer Protocol Secure)

• http에 데이터 암호화가 추가된 프로토콜

3. 서버의 기본 설정이 index.html로 되어있으므로 이 파일을 서버(아마존 서버)에서 클라이언트(브라우저) 쪽으로 보내준다.

index.html

• index 파일은 디렉토리의 대표문서
• 브라우저에서 어떤 디렉토리에 접속했을 때, 자동적으로 보여주는 파일
• 만약, index 파일이 없을 경우 디렉토리에 있는 파일들을 리스트 형식으로 보여주거나 forbidden 메시지가 뜨면서 접근 금지

4. index.html을 받은 브라우저에서 텍스트로 이루어진 index.html 파일을 파싱하면서 DOM 트리를 만들어 나간다.

파싱 (Parsing)

• 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계

DOM Tree (Document Object Model : 문서 객체 모델)

• 브라우저가 html 파일을 읽을 때 브라우저가 이해할 수 있고, 메모리에 보관할 수 있는 object로 변환
• object로 변환 후 Tree 구조를 생성한다. 이를 DOM 이라고 한다.

DOM

• DOM은 우리가 정의한 요소들이 tree 구조로 구성되어 있으며, 이를 이용해서 JS로 웹 페이지 구성 가능

5. html을 읽다가 중간에 link tag를 만나서 css 요청이 발생하면 요청과 응답 과정을 거쳐 css를 파싱

<link rel="stylesheet" href="abc.css" />

6. css 파싱이 종료되면 잠시 중단되었던 html을 다시 읽고 DOM tree 완성시킴

7. 완성된 DOM tree와 CSSOM tree를 합쳐서 Render Tree를 만들게 된다.

CSSOM Tree (CSS Object Model : CSS 객체 모델)

• 브라우저는 html을 DOM으로 만들면서, 개발자가 정의해놓은 CSS와 기본적으로 설정되어 있는 CSS를 cascading rule 에 따라서 병합하여 CSSOM을 만들게 된다.
  ( cascading rule : 계단식 스타일 시트 규칙. 브라우저에 html의 모양과 수행 방법을 알려준다.)

Render Tree

• 브라우저가 html 파일을 읽으면 제일 먼저 DOM Tree를 만들고, 그 다음 CSS 파일을 읽은 다음 최종적으로 확정된 CSS style tree를 만든다.
• 이후, 브라우저에 표시될 요소들만 Render Tree에 선별해서 표시한다.
• 만약, opacity : 0;, visiblity : hidden; 이런 값들이 있다면 사용자의 눈에는 보이지 않지만 요소 자체가 완전히 없어진 것은 아니므로 Render Tree에 포함
  -> Render Tree = DOM Tree + CSSOM Tree

• Render Tree를 빠르게 만드는 방법

• DOM 요소와 CSS 규칙이 적을 수록 빠르다.
• html의 경우, div tag 남용, 쓸데없는 wrapping 등 불필요한 태그 사용 자제
• css의 경우, box를 이동할 때 top, left등 속성을 사용하면 layout부터 다시 발생하게 되는데 translate을 사용하면 composition만 발생

8. html 파서는 파싱을 하다가 script tag를 만나면 js 코드를 실행하기 위해서 파싱을 중단한다.

<script src="javascript.js"></script>

9. 제어 권한을 JS engine에게 넘기고, JS 코드 또는 파일을 로드에서 파싱하고 실행

참고

• 브라우저 렌더링 과정 (파싱-렌더-레이아웃-페인팅)
• index.html 파일의 역할과 간단한 html 웹문서 만들기
• 웹 사이트의 Index.html 페이지 이해
• DNS
• [Web] HTTP와 HTTPS의 개념 및 차이점