내용의 출처는 TOAST UI 입니다.
https://ui.toast.com/fe-guide/ko_PERFORMANCE/#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A1%9C%EB%94%A9-%EA%B3%BC%EC%A0%95
브라우저 로딩 과정
1. 파싱
- 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드.
- 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계.
- HTML 또는 리소스에 CSS가 포함된 경우, CSSOM 트리 구성 작업도 함께 진행.
2. 스타일
- 파싱 단계에서 생성된 DOM, CSSOM 트리를 가지고 스타일을 매칭시켜주는 과정.
3. 레이아웃
- 노드의 정확한 위치와 크기를 계산.
- 각 노드의 정확한 위치와 크기를 픽셀값으로 렌더트리에 반영.
4. 페인트
- 계산된 값을 이용해 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환.
- 위치와 관계없는 CSS 속성(색상, 투명도 등)을 적용.
- 픽셀로 변환된 결과는 포토샵의 레이어처럼 생성되어 개별 레이어로 관리.
5. 합성 & 렌더
- 생성된 레이어를 합성하여 스크린을 업데이트.
- 합성과 렌더 단계가 끝나면 화면에서 웹 페이지를 볼 수 있음.
레이아웃과 리페인트
- 브라우저 로딩 과정 중 스타일 이후의 과정(스타일 > 레이아웃 > 페인트 > 합성)을 렌더링이라고 함.
- 렌더링 과정은 상황에 따라 반복하여 발생 가능.
- 렌더 트리는 자바스크립트에 의해 DOM트리, CSSOM트리가 변경될 때 다시 재구성.
- 레이아웃부터 이후 과정을 다시 수행하는 것을 레이아웃
- 레이아웃 요소에 기하적인 영향을 주는 CSS 속성값을 변경할 때 발생
- 영향을 주지 않는 CSS 속성값을 변경하면 레이아웃 과정을 건넌뜀.(리페인트)
노드란 무엇인가?
노드(node)는 컴퓨터 과학에 쓰이는 기초적인 단위이다.
노드는 트리 구조로 정렬되기도 하며 하나의 자료 구조에 포함된 정보를 표현한다.
이 노드들은 값이나 조건을 포함할 수 있으며 다른 독립된 자료 구조의 역할을 할 가능성이 있다.
노드는 하나의 부모 노드에 의해 표현된다.
출처 : https://ko.wikipedia.org/wiki/%EB%85%B8%EB%93%9C_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)
생경하다.