TIL: 브라우저의 렌더링 원리

홈페이지가 사용자에게 보여지는 순서

1. 주소창에 입력된 주소를 통해 서버를 찾아간다.

2. 입력한 주소의 정확한 주소를 DNS서버에서 ip주소로 변환하여 실제 서버를 찾는다. 

3. 서버에서 HTML파일을 클라이언트로 보낸다.

4. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식)

5. 중간에 css, js스크립트를 다운받는 태그를 만나면 DOM생성을 중지하고 해당 자원들을 다운로드 한다.

5. 이렇게 만들어진 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다.

 

자바 스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다.

리플로우 : 레이아웃 계산을 다시 하는 것 (Geko엔진에서 DOM 배치 단계)
리페인트 : 재결합된 렌더트리를 기반으로 다시 그림 그리는 것

script 태그를 비동기적으로 다운밥는 방법

async : HTML파싱, JS파일 로드가 동시에 진행
defer : DOM생성이 완료된 직후, JS 파싱과 실행이 진행된다.

Pasring

parsing은 구문 분석이라 한다. 문장이 이루고있는 구성성분을 분해하고 분해된 성분의 위계관계를 분석하여 구조를 결정하는 것이다.
즉 데이터를 분해 분석해 원하는 형태로 조립하고 다시 빼내는 프로그램을 말한다.

Parser

Parser란 Complier의 일부로서 원시 프로그램의 명령문이나 온라인 명령문, HTML 문서 등에서 Markup Tag등을 
입력으로 받아들여서 구분을 해석 할 수 있는 단위로 여러 부분으로 해석해주는 역할을 한다. Compiler나 Interpreter에서 
원시 프로그램을 읽어 들여, 그 문장이 구조를 알아내는 Parsing을 행해 주는 프로그램이다.

DOM

문서 객체 모델은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공.

[종류]
1.Core DOM : 모든 문서 타입을 위한 DOM모델
2.HTML DOM : HTML 문서를 위한 DOM모델
3.XML DOM : XML 문서를 위한 DOM모델

HTML DOM

HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의한다.
모든 HTML 요소는 HTML DOM을 통해 접근 가능.

 

XML DOM

XML DOM은 XLM 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의한다. 모든 XML요소는 XLM DOM을 통해 접근 가능.

 

 

Reference

https://intrepidgeeks.com/tutorial/the-order-in-which-the-home-page-is-displayed-to-the-user-browser-rendering-process

홈페이지가 사용자에게 보이는 순서(브라우저 렌더링 과정)

 

https://kingpodo.tistory.com/8

1. Parsing이란 무엇인가?

https://www.tcpschool.com/javascript/js_dom_concept

코딩교육 티씨피스쿨