브라우저의 동작 과정

HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 생성한다
DOM 및 CSSOM을 결합하여 렌더 트리를 형성한다
렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다
개별 노드를 화면에 페인트한다

파싱

먼저 DOM트리와 CSSOM 트리를 생성하는 과정을 알기전에 파싱이란 개념을 알고 가는 것이 좋을 듯 하다

파싱(Parsing): 토큰화된 코드를 구조화하는 과정을 말한다
파서(Parser): 파싱 과정을 전문적으로 해주는 부분
토큰화 : 의미가 있는 최소 단위로 코드를 쪼개는 것을 의미한다.

<div></div> 라는 코드를 토큰화 하면 ['<','div','>','</','div','>'] 처럼 나타낼 수 있다

HTML 파싱

출처: https://velog.io/@joyoung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95

브라우저는 위에서 말한 토큰화 된 HTML 문자열들을 이용해 **파스 트리(Parse Tree)**를 생성한다 파스 트리는 브라우저가 읽어야 할 HTML 코드를 트리 모양으로 구조화하여 나타낸 것입니다

만들어진 파스트리를 이용해 DOM 트리를 생성한다.

과정:

DOM 트리와 파스트리의 차이점

파스 트리는 토큰화 된 문자열을 단순하게 구조화한 트리에 불과하지만, DOM 트리는 우리가 실제로 상호작용할 수 있는 HTML 엘리먼트로 이루어진 트리입니다. 즉 실제 JavaScript를 가지고 동작하게 하는 것은 DOM 트리이다.

결론 => 파스 트리 : js로 컨트롤 불가, DOM 트리 : js로 컨트롤 가능

HTML 파서 특징

오류에 너그럽다

<body>
<p class=highLight> Hello
<div><span>World

문제점: 닫는 태그가 작성되지 않았고 class 값을 "" 감싸지 않음
속성에 의해 에러를 복구한다

<body>
  <p class="highLight">Hello</p>
  <div><span>World</span></div>
</body>

오류를 복구해 위와 같이 완성된 코드를 작성한다

파싱 과정이 중단될 수 있다 HTML 파싱 도중 script, link 같은 외부 태그를 만나게 되면 HTML 파싱을 중단한다. 그리고 해당 태그의 해석을 실행하게 되는데 외부 파일을 참조하고 있다면 다운로드를 한 후 해석을 시작한다
재시작 HTML 파싱 과정은 어떠한 외부 요인을 방해 받을 수 있다. 파싱 중간에 외부의 요인으로 인해 DOM 추가, 변경, 삭제 될 수 있기 때문이다. 이렇게 되면 HTML은 처음부터 다시 파싱 과정을 거친다. 즉 바이트를 문자로 변환 -> 토큰화 -> DOM트리 생성. 때문에 처리해야 할 HTML이 많을 때에는 파싱 시간이 오래 걸릴 수 있다

CSS 파싱

출처: https://miro.medium.com/v2/resize:fit:1400/format:webp/1*oCc4pqsL_RK0x9ZPyddd3w.png

일반적으로 CSS link태그가 HTML 코드 내에 삽입되어 있어 HTML을 파싱하는 도중에 CSS파싱이 시작된다. HTML 파서는 네트워크를 통해 먼저 받아온 코드부터 해석하지만 CSS 파서는 전체 파일을 모두 다운로드 할때까지 파싱을 시작할 수 없다.

파싱 과정이 끝나면 다운로드한 내용과 순서를 바탕으로 DOM 트리와 같은 구조인 CSSOM 트리를 생성한다. CSSOM 트리는 스타일, 규칙, 선택자 등의 정보가 노드에 들어가게 된다

렌더 트리

DOM 트리가 구성되는 동안 브라우저는 렌더 트리 동의어로는 프레임 트리를 구성하기 시작한다
렌더 트리 : 화면에 나타나는 요소들을 결정하는 트리

출처: https://velog.io/@joyoung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95

렌더 트리는 DOM 트리와 CSSOM 트리를 조합하여 만들어지고, 이 때 화면에 그려지지 않는 요소들은 트리에 나타나지 않는다

레이아웃 또는 리플로우

레이아웃 단계에서는 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산 하여 좌표에 나타냅니다. 브라우저는 레이아웃 단계에서 요소의 크기, 위치, 가시성 등을 결정하고 렌더링에 대한 최적의 배치를 계산합니다.

페인트

페인트는 마지막 단계 입니다. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며, 여러 개층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함된다.

문서가 클수록 브라우저의 수행 작업량이 많아지며, 스타일이 복잡할수록 페인팅에 걸리는 시간도 늘어난다

DOM

DOM이란 Document Object Model의 약자이며 스크립트 언어와 프로그래밍 언어를 통해 웹 문서(HTML과 같은 정적인 문서)를 쉽게 제어할 수 있게 하기 위해 문서를 객체화한 것을 말한다

문서 객체화: HTML 같은 정적인 문서를 트리 구조의 객체로 변환한 것을 의미한다

DOM 트리

Document
└── html
    ├── head
    │   ├── title
    │   │   └── "My Webpage"
    │   └── <!-- "Head section ends here" -->
    └── body
        ├── header
        │   └── h1
        │       └── "Welcome"
        ├── main
        │   └── p
        │       └── "This is a paragraph."
        └── footer
            └── p
                └── "Footer info."

웹 브라우저가 HTML 문서를 읽어 들이면 위에 그림처럼 Document 객체로 시작하는 DOM트리가 만들어 진다
트리를 구성하는 각 요소들을 노드라고 부른다
트리에 있는 노드는 모두 객체다

DOM 노드

DOM 노드는 문서의 모든 구성 요소(요소, 텍스트, 속성 등)를 표현하는 객체다
각각의 노드는 유형별로 역할과 속성을 가지며, JavaScript를 통해 프로그래밍적으로 조작할 수 있다
DOM 노드는 문서와 프로그래밍 언어 간의 다리 역할을 하여, 동적인 웹 콘텐츠 제작을 가능하게 합니다.

노드 종류

문서노드: document이자 최상위 노드를 의미한다 (DOM에 진입하기 위한 시작점)
요소노드: html의 태그를 의미한다 (예시: div, p)
속성노드: 요소노드(태그)의 속성들을 의미한다 ex ) href, alt 등
텍스트 노드: 요소노드(태그)의 텍스트를 의미한다. (DOM 트리의 단말 노드)
주석 노드: HTML 주석을 의미하며 주석도 DOM 트리의 일부이며, 노드 유형으로 관리된다

DOM 노드와 DOM 요소의 관계

DOM 노드가 더 큰 개념이며, DOM 요소는 그중 HTML 태그를 나타내는 특정 노드 유형입니다.
DOM 노드는 모든 구성 요소 (요소, 텍스트, 문서, 주석 등)를 포함 하지만 DOM 요소는 요소 노드만 포함하다는 차이가 있다

파싱
HTML 파싱
- DOM 트리와 파스트리의 차이점
- HTML 파서 특징
CSS 파싱
렌더 트리
레이아웃 또는 리플로우
페인트
DOM
DOM 트리
DOM 노드
- 노드 종류
- DOM 노드와 DOM 요소의 관계