HTML, CSS, JS의 동작(렌더링) 원리

렌더링의 원리 초간단 요약!

1. HTML 파싱과 DOM 트리 구축

HTML 파싱: 브라우저는 HTML 파일을 받고 태그들을 해석하여 파싱 DOM 트리 구축: 파싱된 HTML 요소들은 DOM(Document Object Model) 트리로 변환 이 트리는 문서의 구조적 표현이며, JavaScript를 통해 동적으로 조작 가능

2. CSS 파싱과 CSSOM 트리 구축

CSS 파싱: 브라우저는 모든 CSS를 읽고 CSS 규칙(선택자와 속성)을 파싱 CSSOM 트리 구축: 파싱된 CSS는 CSS 객체 모델(CSSOM) 트리로 변환 CSSOM은 각 DOM 요소에 적용될 스타일을 결정하고, DOM과 병합되어 렌더 트리를 형성하는 데 기여

3. 렌더 트리 구축

렌더 트리 생성: DOM 트리와 CSSOM 트리가 결합하여 렌더 트리를 형성 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 위치와 크기를 결정하는 데 사용

4. 레이아웃(Reflow)

레이아웃 계산: 렌더 트리에 기반하여 각 요소의 정확한 위치와 크기가 계산 이 과정은 페이지의 초기 로드 또는 요소의 변화가 있을 때마다 발생 가능

5. 페인팅

화면에 그리기: 최종적으로 요소들이 화면에 그림 이 단계에서 텍스트 색상, 이미지 등 시각적 요소들이 사용자에게 표시

6. JavaScript 처리

JavaScript 실행: 웹 페이지와 상호작용하는 JavaScript가 실행 DOM API를 통해 DOM 트리가 변경되면 이 변경사항이 다시 레이아웃과 페인팅 과정을 통해 화면에 반영

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/HTML-CSS-JS-fb6bd6ae3c9346089e5fef7c0e8b44f8?pvs=4

HTML, CSS, JS의 동작(렌더링) 원리 | Notion