브라우저에서 렌더링은 어떻게 동작 하나요?

woong·2023년 2월 25일

면접 질문

목록 보기

2/8

1. Parsing(파싱)

HTML 파일을 해석해 DOM(Document Object Model) Tree를 구성합니다.
CSS 파일이 있다면 CCSOM(CSS Object Model)도 구성합니다.

HTML 파싱이 중간에 멈출 수 있다?!

스크립트를 읽는 도중 script 태그를 만나면 자바스크립트 엔진은 HTML 파싱을 멈추고 script에게 파싱할 권한을 먼저 내어줍니다.
그 이유는, document.write()와 같이 DOM 구조를 변경할 수 있는 명령어가 있을 수 있기 때문입니다.

리소스가 어떻게 로딩되길 원하는지 브라우저에 힌트를 주는 방법

script 태그에 async 또는 defer 속성을 추가해 스크립트 파싱 방식을 핸들링할 수 있습니다.

1) async

boolean 타입의 옵션으로 선언하는 것만으로도 true로 설정됨.
비동기적으로 js파일을 다운하고 js파일이 다 다운되면 HTML 파싱을 멈추고 js파일을 실행시킵니다. 실행이 완료되면 남은 HTML 파일을 다시 파싱합니다.
head + async
- 장점: head에 스크립트 파일을 위치키셨기 때문에 js파일을 빨리 다운 받을 수 있습니다.
- 단점: js파일에서 querySelector로 DOM 요소를 조작하려고 하는데 아직 HTML 파일이 덜 다운됐다면 조작할 때 에러가 날 수 있다.
  또, js파일을 실행시키기 위해 파싱을 멈춰야하기 때문에(회색 블럭) 사용자가 페이지를 보는데 시간이 걸릴 수 있음.
async가 여러개 있다면?
- js파일이 다운로드 된 순서부터 실행됩니다. 그렇기 때문에 js파일 순서가 중요하다면 문제가 생길 수 있습니다.

2) defer

js파일을 다운하자! 라는 명령어만 실행하고선 HTML 파싱을 계속 진행합니다. HTML 파싱이 끝난 후 js파일을 실행시킵니다.
defer가 여러개라면?
- js파일 파싱 완료된 시점이 다르더라도 선언된 순서대로 실행됩니다. 동작이 예상 가능하기 때문에 defer 사용하는게 더 안전하고 효율적입니다.

2. Style

DOM Tree와 CSSOM Tree를 매칭시켜 Render Tree를 구성합니다.

3. Layout(또는 Reflow)

Render Tree에서 각 노드의 위치와 크기를 계산합니다.
루트 노드에서부터 순회하며 노드의 정확한 위치를 계산하고 Render Tree에 반영. 만약 %로 크기 설정을 했다면 Layout 단계에서 %값을 계산해 픽셀로 변경합니다.

Reflow란?
- 노드가 추가, 삭제되거나 요소 레이아웃(또는 포지션), 화면 리사이징에 변화가 생기면 다시 렌더 트리를 구성하는 것.
- repaint의 상위 과정이기에 reflow가 발생하면 repaint도 발생됩니다.
Reflow를 줄이는 방법
- 스타일을 줄 때 cssText 이용해 reflow가 한번만 실행 되도록한다.
- 높이,너비 이용시 left, right보다 transform, display: none을 사용.
- 불가피하게 써야할 경우엔 position: absolute, fix를 이용해 DOM을 묶어주는게 좋습니다.
- 여러 엘리먼트가 추가 된다면 가상의 형태로 추가할 엘리먼트를 구성하고 한번에 수정할 수 있게 해주는게 좋습니다.

// bad
const ulElement = document.getElementsByTagName('ul')[0];
for(let i=0; i<10; i++) {
  ulElement.innerHTML += `<li> list${i} </li>`;
}
// good
const ulElement = document.getElementsByTagName('ul')[0];
let strHtml = ulElement.innerHTML;
for(let i=0; i<10; i++) {
  strHtml += `<li> list${i} </li>`;
}
ulElement.innerHTML = strHtml;

4. Painting(또는 Repaint)

3단계(Reflow)에서 계산된 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다.
페인트 과정: 배경 > 텍스트 > 도형 순
스타일이 복잡해질 수록 paint 시간이 증가됩니다.
그림자 >>>>> 단순 배경
Repaint만 하는 경우
- 레이아웃 영향을 주지 않는 엘리먼트 개별의 변화만 있을 경우
- color, background-color, visibility 스타일 속성으로 repaint만 일으킬 수 있습니다.
- repaint만 일어나게 하는게 렌더링 최적화 시키는 방법