- 윈도우(글로벌오브젝트) - 사이즈, 스크롤, 페이지 로드상태 확인할때 많이쓴다.
- DOM, BOM (브라우저에 관련된 navigator, fetch, storage, loacation등 웹api관련 오브젝트들), 자바스크립트
- 브라우저에서 동작하는 것을 만들때 dom, bom 자바스크립트에 관련된 api를 모두 사용가능하다.
DOM Tree
웹페이지를 만들면 html파일을 브라우저에서 읽게된다. 브라우저에서는 body section 태그 등등 각각의 태그들을 분석해서 노드로 변환하게 된다. 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환하는 것이다.
html파일에서 쓰인 태그가 자바스크립트에서는 Node라는 오브젝트로 변환이 된다. 이 노드라는 오브젝트에는 클래스나 텍스트같은 모든 정보들이 포함되어있고, Node는 이벤트타겟이라는 오브젝트를 상속한다.
결국 Node라는 오브젝트는 EventTarget의 오브젝트라는 것이다. 즉 모든 노드는 이벤트가 발생할 수 있다.
그래서 document도 Node를 상속하기 때문에 documnent에서도 이벤트가 발생할 수 있다.
브라우저가 우리의 웹페이지 즉 html을 읽어서 DOM트리로 변환하게 된다.
html파일을 브라우저에서 읽으면 브라우저도 실행되고 있는 어플리케이션이기때문에 이 어플리케이션이 이해 할 수 있는, 즉 메모리에 보관할 수 있는 오브젝트로 변환하게 된다. 이렇게 브라우저 위에서는 우리의 각각의 태그들이 그에 맞는 오브젝트로 맵핑되어서 표기되어지고, html에는 헤드와 body가 있고 바디에는 섹션과 span이 있고 이렇게 쭉쭉 나무형식으로 구조가 작성되어져있는것이 DOM트리이다.
렌더링 과정
브라우저에서 url을 입력하게되면,
먼저 브라우저가 서버에게 html파일을 요청하고 응답받아서 로딩을 하게 된다. 데이터를 받아와서 이 html을 한줄한줄씩 읽으면서 DOM요소로 변환하게 된다. (scripting)
이렇게 DOM으로 변환하고 CSS요소를 CSSOM으로 변환한다음에 윈도우에 표기하기 위해 각각의 요소들이 어떤 위치에 얼마나 크게 표기 될 건지 계산한 다음에 painting, 그림을 그리는 스텝으로 진행이 된다.
html페이지에서 브라우저가 이해할 수 있도록 브라우저만의 언어로 바꾸는 constuction파트와
이렇게 만들어진 브라우저가 이해할 수 있는 렌더링트리를 이용해서 구조를 작성하고,
어디에다 배치할건지 계산후 실제로 window에 그림을 그려주는 rendering하는 Operation파트로 나뉜다.
constuction파트 dom요소로 변환하고 cssom을 만들고 최종적으로 렌더트리를 만드는것까지를 의미하고
Operation파트에서 레이아웃,페인트,composition을 통해 최종적으로 사용자에게 내용이 보여지는 것이다.
레이아웃이란 우리가 렌더트리를 이용해서 위치과 크기를 구상하고, 이런 레이아웃을 통해 paint과정이 일어난다. 이과정에서는 포토샵에서 레이어별로 묶어 작업하는 것과같이 레이어단계가 있다. z-index에서 같은 위치에 있는것끼리 묶는것 같은 과정이다. 이렇게 다누이별로 하면 어떤부분이 변화하면 그 레이어만 수정할 수 있기때문에 성능이 좋아진다.
이렇게 준비한 레이어를 순서대로 표기하는것이 composition이다.
이렇게 html에서 브라우저가 표기할 수 있는 이 단계까지 critical rendeing path라고 부른다.
- DOM요소가 작으면 작을수록 CSS규칙이 작으면 작을수록 tree가 작아지기때문에 빠르게 렌더링 가능하다. 불필요한 태그나 클래스를 만드는것을 자제하면 좋다.
