브라우저의 렌더링 과정

탐색 (Navigation)

: 웹 페이지를 로딩하는 첫 단계

- URL 전송

- 링크 클릭

- 폼 제출 등의 동작으로 요청 시 발생

=> 탐색까지의 과정을 최소화 하는 것이 목표

 

DNS 조회 (DNS Look Up)

: Domain Name System. 해당 페이지의 자원이 어디에 위치하는 지 찾는 것.

브라우저에서 DNS 조회를 요청한다 

=> 해당 Domain의 서버에 의해서 처리되고, IP 주소로 응답.

=> 일정 기간 동안 캐시되기 때문에 캐시되는 동안 다시 조회 할 경우 캐시에서 IP 주소를 검색하여 후속 요청.

 

TCP HandShake

: 연결을 설정하기 위해 데이터 전송 전 통신하려는 두 주체의 TCP 소켓이 매개변수를 주고 받을 수 있도록 한다.

 

TLS Negotiation

: 보안성있는 연결을 위한 또 다른 핸드셰이크. 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인한다.

ACK 이후 보안성을 위한 왕복 과정을 더 거쳐야 한다.

 

 

응답 (Response)

: 웹 서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신 초기 request를 보낸다. 웹 사이트는 대게 HTML 파일을 요청한다. 서버가 요청을 받을 시, 관련 응답 헤더와 함께 HTML의 내용을 응답하게 된다.

혼잡 제어(Congestion Control) / TCP 슬로우 스타트 (TCP Slow Start)

: TCP 패킷은 전송 중에 세그먼트로 분할된다. 서버는 세그먼트를 전송한 후 클라이언트로부터 ACK 패킷 형태로 승인을 받아야 한다. 전송 시간 증가 혹은 과부하를 막기 위해 세그먼트 수의 균형을 맞춰야 한다. 이를 위해 TCP 슬로우 스타트 알고리즘을 사용하여 데이터의 양을 점차적으로 늘리고 부하가 높은 경우 전송되는 데이터의 양을 줄인다. 

 

구문 분석 (Parsing)

: 브라우저가 데이터 청크를 받으면, 구문 분석을 시작한다.

브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계이다. 이는 렌더러가 화면에 페이지를 그리는 데 사용된다.

DOM 트리 구축

HTML을 처리하여 DOM 트리를 만든다. 

- 토큰화와 트리 생성을 포함한다. 

- DOM 트리는 문서의 내용을 설명한다.

CSSOM 구축 (Building the CSSOM)

: CSS를 처리하고 CSSOM 트리를 만드는 것. 브라우저는 CSS 규칙을 이해할 수 있고 작업을 진행할 수 있도록 스타일 맵으로 변환한다. 

CSSOM 트리는 사용자 에이전트의 스타일 시트를 포함한다.

렌더 (Navigation)

: 렌더링 과정에는 스타일, 레이아웃, 페인트 그리고 합성이 포함된다. 

 

CSSOM과 DOM 트리는 구문 분석되는 과정에서 생성되고 렌더 트리로 합성된다.

렌더 트리는 보이는 요소의 레이아웃을 계산한다.

그리고 요소가 화면에 페인트 된다.

 

레이아웃 (Layout)

: 각 노드의 도형 값을 계산하기 위해 레이아웃을 실행하는 것.

처음 노드의 사이즈와 위치가 결정되는 것을 레이아웃,

이후 노두의 크기와 위치를 다시 계산하는 것을 리플로우 라고 부른다. 

상호작용 (Interactivity)

: TTI (Time to Interactive) 는 DNS 조회와 SSL 연결이 이루어지는 첫 요청부터 페이지가 상호작용할 준비가 될 때까지 얼마가 걸리는 지를 측정하는 단위이다. 

 

 

쉽게 정리

Domain 조회 => 실제 서버 연결 => 서버에서 클라이언트로 HTML 파일 전송 => 구문 분석 과정 중 DOM 트리, CSSOM 트리 생성 => 분석 종료 시 두 트리를 합쳐 Render Tree 생성.

근데 만약 JS 포함 시 ? HTML 파싱 중 Script 태그를 만나 JS 실행을 위해 파싱 중단 => 제어 권한을 JS 엔진에게 넘김.

 

 

+ 리액트의 렌더링 과정

: 렌더 단계 + 커밋 단계로 이루어진, 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정

 

렌더 단계

: 렌더가 트리거되면 DOM 에 그려질 요소들을 파악하는 과정을 거치게 된다.

 

초기 렌더 : render() 메소드의 루트 컴포넌트 호출

리렌더 : 상태 업데이트가 발생한 컴포넌트 호출

커밋 단계

- 렌더 단계의 변경 사항을 실제 DOM에 적용해 사용자에게 보여준다.

 

1. 렌더링 프로세스가 시작

=> 리액트는 루트부터 훑으며 변경 사항이 있는 컴포넌트를 찾는다.

2. 변경사항이 있어 업데이트가 필요한 컴포넌트를 찾으면 클래스 내부의 render() 함수를 실행

=> 결과물 저장

3. 렌더링 결과물은 JSX 문법으로 구성 => JS로 컴파일 되면서 React.createElement()를 호출하는 구문으로 변환하며 JS 객체를 반환.

4. 가상 DOM과 비교해 실제 DOM에 반영하기 위한 모든 변경 사항을 차례로 수집

 

 

---

 

 

참고

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work