브라우저 렌더링 진행과정
이 글은 의외로 신입이 모르는 것! - 브라우저 렌더링 과정 을 이해하기 위해 작성된 글 입니다.
작성자 분 정말정말로 감사감사합니다..
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 코드 또는 파일을 로드에서 파싱하고 실행
참고
전 척척학사지만 말하는 감자에요