프론트엔드 면접 예상질문 (브라우저의 렌더링 원리)

브라우저의 렌더링 원리

1. HTML 파싱

• DOM 트리 구축

2. CSS 파싱 => CSSOM 트리 구축

• CSS는 렌더링 차단 리소스 (Renter Blocking Resource).
  HTML과 달리 CSS는 계단식 상속을 가지고 있어 부분적으로 실행이 불가함으로 완전히
  리소르를 파싱하지 않으면 리소스트리 구성이 불가하다.

3. JS 실행

• JS는 파서 차단 리소스(Parser Blocking Resource)
  HTML 중간에 JS 호출시 HTML 파싱이 중단. 이러한 부분을 처리하기 위여하여 HTML코드 최하단에 JS를 불러오는것이 좋다. 파싱이 중단되는것을 피하기 위해 async속성을 사용하는 방법도 있다.

4. DOM과 CSSOM을 조합해 트리(Renter Tree) 구축

• display:none 속성과 같은 화면에 보이지 않고 공간을 차지하지 않는 속성들은 렌더트리로 구축하지 않는다

5. 뷰포트 기반으로 렌더트리의 각 노드의 위치와 크기를 계산(Rayout / Reflow 단계)

• 뷰포트의 크기는 meta태그에 의해 결정된다. 만약 meta태그가 선언 되어있지 않는다면
  기본 뷰포트인 980px을 기준으로 렌더링 된다.

6. 페이지의 가시적인 내용을 픽셀로 변화하여 계산한 위치와 크기를 기반으로 화면에 렌더링 (Paint 단계)

• 페인트 단계에서 렌더링 되는 시간은 DOM의 스타일 크기에 따라 차이가 남