[웹 브라우저 Background 쌓기]

1. 웹 브라우저 렌더링 과정

1. HTML의 파일을 웹 서버로부터 가져온다. 이 때, HTML파일을 파싱한다.
   이 때 파싱이란, HTML파일을 태그 기반으로 부모 - 자식간의 관계를 바탕으로 DOM tree를 만든다.
2. CSS도 html 파일과 마찬가지로, 정보를 파싱하여 CSSOM tree를 생성한다.
3. HTML과 CSS를 각 태그 정보를 기반으로 mapping 하여 Render tree를 만든다.
4. 이를 기반으로, rendering이 이루어 진다.

   DOM (Document Object Model)
   HTML 전체 코드는 Document 이고,
   그 안의 태그들을 객체 (Object) 로 본다.
   그리고 자바스크립트는그 객체를 수정하며 제어한다.

2. 렌더링 과정에서 java script의 위치

웹브라우저의 렌더링 과정을 보면 HTML정보를 받아서 파싱하고, CSS 정보를 받아 파싱한 후에 mapping이 이루어진다.
그리고 자바스크립트는 만들어진 DOM tree 를 기반으로 HTML을 제어한다.
만일 HTML의 head 태그에서 자바스크립트 코드를 script로 넣게 되면, HTML을 파싱할 떄, 자바스크립트로 HTML의 제어가 먼저 이루어진다.
HTML의 파싱이 먼저 이루어지는 것이 아니라, script 태그를 만나게 되면, HTML의 제어는 Java Script에 달려있으므로, 자바스크립트 엔진이 코드를 읽게 된다.
이 때 HTML의 정보들이 아직 파싱이 이루어져있지 않은 경우(DOM tree의 생성 전) 오류가 있을 수 있고, 기본적으로 화면 렌더링이 느려지기 때문에 Javs Script는 항상 태그 바로 앞에 위치시킨다.

3. window document의 차이

• window : 웹 브라우저 객체 (현재 윈도우를 제어) <BOM = Browser Object Model>
  이 친구도 자바스크립트로 제어 가능

  예시
  alert() / window.alert() 둘이 같은 방법이다.

• document : DOM 객체 (HTML코드를 접근하는 최상위 객체)
  자바스크립트로 document를 건들여 HTML의 코드를 제어할 것이다.