🤔 브라우저 렌더링
1. 요청
브라우저는 (URL을 통해) HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다.
2. 파싱
브라우저의 렌더링 엔진은 받아온 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성하고, CSS 파일 및 스타일 요소를 파싱하여 CSSOM(CSS Object Model)을 생성한다.
3. 스타일
이후 DOM 트리와 CSSOM을 결합하여 렌더 트리(Render Tree)를 생성한다.
4. 자바스크립트 실행
브라우저의 자바스크립트 엔진은 HTML 파싱 중 JS 코드를 만나면 DOM 생성이 멈추고, JS 엔진에 의해 JS 코드를 실행한다.(JS 파싱은 JS 엔진이 직접하기 때문) JS 코드는 일반적으로 DOM 조작이나 이벤트 처리와 같은 작업을 수행하며, 실행된 결과는 DOM에 반영된다.
5. 레이아웃(리플로우)
렌더 트리(Render Tree)가 생성되면 각 요소의 레이아웃(위치, 크기)을 계산한다. 이 과정은 브라우저의 렌더링 엔진에 의해 수행된다.
6. 페인팅
렌더 트리(Render Tree)를 기반으로 화면에 요소들을 페인팅한다.(웹 화면은 픽셀 단위로 구성되는데 픽셀을 채워나가는 것을 페인팅이라고 표현한다.)
7. 합성
페인팅 단계에서 생성된 레이어를 합성하여 브라우저 화면에 실제로 보이는 것들을 그린다.
8. 렌더링(스타일->레이아웃->렌더링->합성)
DOM 요소를 변경하면 DOM 트리가 재구성되고, CSSOM과 함께 새로운 렌더 트리가 생성된다. 새로운 렌더 트리와 5-7 과정이 반복된다.
🔎 리플로우(Reflow)
-리플로우는 렌더 트리의 일부 또는 전체가 변경되어 레이아웃을 다시 계산해야 할 때 발생
-요소의 크기, 위치, 형태 등의 변경으로 인해 발생
-리플로우가 발생하면 렌더 트리의 일부 또는 전체가 다시 생성되고, 다시 레이아웃이 계산됨
🔎 리페인트(Repaint)
-리페인트는 렌더 트리의 일부 또는 전체의 스타일이 변경되어 다시 그려져야 할 때 발생
-스타일 속성의 변경으로 인해 발생
-리페인트가 발생하면 브라우저가 화면을 다시 그리기 위해 요소의 픽셀을 새로 칠함
불필요한 리플로우와 리페인트를 최소화하기 위해 CSS 속성의 변경을 최소화하고, 가능한 경우 효율적인 CSS 선택자를 사용하는 것이 좋다.
