Wanna be a thinker

1. BOM이란?

- 브라우저와 관련된 기능을 구성하는 브라우저 객체 모델의 집합

- 최상위 객체는 window로 BOM은 window의 하위 객체

2. DOM이란?

- DO(문서 객체) : HTML TAG들을 Javascript에서 이용할 수 있는 객체로 만든 것

- DOM의 넓은 의미 : 웹 브라우저가 HTML 페이지를 인식하는 방식

- DOM의 좁은 의미 : document 객체와 관련된 객체의 집합

- 문서 객체의 생성 방식

1) 정적 생성 방식 : 웹 브라우저가 HTML 문서에 적힌 태그를 읽을 때

2) 동적 생성 방식 : 원래 HTML 페이지에 없던 문서 객체를 Javascript를 통해 생성할 때

출처 : m.blog.naver.com/magnking/220972680805

정의

서버로부터 HTML 파일을 받아 브라우저에 표현하는 과정

흐름

1) 브라우저가 서버로부터 HTML문서를 다운로드

2) 렌더링 엔진이 HTML 문서를 파싱하여 DOM 트리를 형성

3) 외부 css파일과 HTML 내 스타일 요소를 파싱하여 CSSOM 트리를 형성

* 브라우저의 자체 스타일, 사용자 정의 스타일, HTML 태그의 스타일 순서로 처리하며,

  중복 시, 나중에 처리되는 스타일을 따른다. 즉, 인라인 스타일 속성이 우선

4) DOM과 CSSOM 트리가 결합하여 렌더링 트리를 형성

* 화면에 드러나지 않는 head태그, display 속성에 none 값이 할당된 요소는 포함되지 않는다.

5) 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 레이아웃 혹은 리플로우 단계를 진행

* 각 객체의 정확한 크기, 위치를 파악하기 위해 브라우저는 렌더링 트리를 루트부터 순회

6) 렌더링 엔진은 각 요소의 배치장소와 크기에 따라 페인트 이벤트를 발생시켜

    렌더링 트리를 화면에 표현하는 페인팅 혹은 래스터화 단계를 진행

* 페이지가 한꺼번에 그려지지 않는 것은 모든 HTML을 파싱할 때까지 기다리지 않고

  배치와 그리기 과정을 진행하기 때문

출처 : velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80