[it기초] DOM이란? (웹브라우저 렌더링 과정)

#it기초 #DOM이란 #DOM #웹브라우저렌더링

​

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

​

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

1. 이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

​

DOM이란?

© CopyrightFreePictures, 출처 Pixabay

JS(java script)는 html요소를 제어하기 위해 만든언어입니다.

​

웹브라우저는 브라우저 마다 렌더링 엔진이 존재합니다. 이 엔진이 html파일을 읽은 후 해독하여 모든 요소를 객체화하여 js로 접근이 가능하도록 만듭니다. 이 과정을 DOM(Document Object Model)이라고 합니다.

​

​

DOM-tree

html 문서를 객체화 - DOM-TREE

​

이렇게 객체화된 요소들은 js를 통하여 쉽게 제어가 가능합니다.

​

웹페이지 렌더링 과정

웹브라우저가 네이버에 접속하기전 DNS서버에 www.naver.com의 ip를 요청합니다. 네이버 ip를 받은 후 네이버 서버에 HTML,CSS,JS,IMG,폰트 등 파일을 요청합니다. 네이버서버는 파일을 건네주고 클라이언트는 파일을 받아 해독을 시작합니다.

웹브라우저가 HTML파일을 해독하는 과정을 파싱이라 합니다. HTML을 파싱하며 DOM tree를 만듭니다.

​

도중 <style>을 만나면 HTML파싱 작업을 멈추고 CSS를 해독합니다. CSS파일을 해독하며 CSSOM tree를 만듭니다. 이 과정이 끝나면 HTML파싱이 멈춘 지점으로 돌아가 다시 파싱을 시작합니다.

​

도중 <script>을 만나면 js Engine에게 권한을 넘겨 js코드를 파싱하여 AST를 만든 후 실행합니다.. 이 과정이 끝나면 다시 HTML파싱이 멈춤 지점으로 돌아가 재 파싱 합니다.

​

DOM과 CSSOM을 합쳐 Render Tree를 생성합니다.

​

렌더링 엔진은 Render tree Node를 올바르게 배치합니다. 이후 UI Backend는 화면의 UI를 그립니다. 이후 Render Tree에 있는 Node를 순서대로 구성하는 composition작업을 완료합니다.

​

이후 웹사용자에게 화면을 출력합니다.

​

​