Browser Rendering Process

[cys4585]

1. 브라우저가 렌더링을 수행하는 과정을 설명해주세요.
2. JS 로드로 인해 DOM 생성이 중단되는 문제를 해결하는 방법을 설명해주세요.
3. 리렌더링 과정에 대해서 설명해주세요.

[cys4585]

1. 브라우저가 렌더링을 수행하는 과정을 설명해주세요.

1. HTML을 파싱하여 DOM을 생성합니다.
2. DOM을 생성하던 중 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단하고 CSS 파일을 요청, 파싱하여 CSSOM을 생성합니다. CSS 파싱을 완료하면 HTML 파싱을 재시작합니다.
3. DOM을 생성하던 중 JS를 로드하는 script 태그를 만나면 DOM 생성을 일시 중단하고 JS 파일을 요청합니다. 로드가 완료되면 JS 엔진에 제어권이 넘어가 JS를 실행합니다. JS 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱을 재개합니다.
4. HTML, CSS 파싱이 완료되면 DOM, CSSOM을 결합하여 Render Tree를 생성합니다. Render Tree에는 화면에 렌더링되는 노드만으로 구성됩니다.(display:none 또는 meta 태그 노드 등은 포함되지 않습니다.)
5. Render Tree를 기반으로 레이아웃(위치와 크기)을 계산하고 페인팅합니다.

2. JS 로드로 인해 DOM 생성이 중단되는 문제를 해결하는 방법을 설명해주세요.

JS 로드로 인한 DOM 생성이 중단되는 문제를 해결하기 위해 script 태그에 async과 defer 어트리뷰트를 사용할 수 있습니다.

async와 defer를 사용하면 HTML 파싱과 JS 로드가 비동기적으로 진행됩니다.

async과 defer의 차이는 JS 실행시점입니다.

• async: JS 로드 직후에 JS 실행이 진행됩니다.
• defer: DOM 생성이 완료된 이후에 JS 실행이 진행됩니다.

3. 리렌더링 과정에 대해서 설명해주세요.

자바스크립트 코드로 인해 DOM이나 CSSOM이 변경된 경우, Render Tree도 변경됩니다.

이 변경된 Render Tree를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면이 다시 렌더링됩니다.

여기서 레이아웃 계산을 다시하는 것을 리플로우, 페인트를 다시 하는 것을 리페인트라고 합니다.

리플로우는 노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행됩니다. 레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 실행됩니다.