브라우저 동작원리

HTML을 받은 브라우저는 2단계를 거쳐서 보여준다.

1 단계 파싱 : 랜더링 전처리 단계

  1. html → DOM 트리 구조로 변환
  2. css, imag, js 리소스 다운로드 (css → cssom 트리로 변환)
  3. js → 인터프린터, 컴파일, 파싱 및 실행

2 단계 랜더링 :

  1. DOM 트리 + CSSOM 트리 ⇒ 랜더트리로 결합 (js가 있다면 DOM API 사용, 리플로우, 리페인팅된다)
  2. 레이아웃 정하기 ⇒ 배치
  3. paint

⇒ 브라우저 랜더링은 딱 한번만 실행되는 것이 아니다!

1. 자바스크립트에 의한 노드 추가 또는 삭제될 때 (ex. Element.insertAdjacentHTML())
2. 브라우저 창 리사이징에 의한 viewport(현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역) 크기가 변경될 때
3. HTML 요소의 레이아웃에 변경을 발생시키는 width, height 등의 스타일이 변경되었을 때

[JavaScript]　브라우저 렌더링 과정(원리)

이런 리랜더링을 줄일 수 없을까? 하고 탄생한 게 SPA 라이브러리 들이다.

React란?