브라우저 렌더링 과정

브라우저 렌더링 과정 + 서버에서 데이터 받아오는 과정 포함

1. 주소창에 URL주소 입력
   1-1. 방문한적 없는 경우 -> DNS 서버에 요청 + 필드화
   1-2. DNS 기록에 IP기록이 있는 경우 -> 캐싱된 IP 주소를 반환 (요청 속도⬆️)
   1-3. DNS 조회는 호스트 이름 당 한 번만 수행하면 되나, 요청된 페이지에서 참조한 각각의 호스트명에 대해 DNS 조회를 한번씩 더 수행한다.
   (글꼴, 이미지, 스크립트 등이 다른 호스트명을 가진 경우, DNS 조회 수행)
   ** 모바일 네트워크에서 더 느려지는 이유
   사용자가 모바일 네트워크(셀룰러)로 접속하면 DNS 서버에 도달하기 위해 셀 타워를 거쳐야 한다.
   휴대폰기기->셀타워->DNS 서버

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

2. 전달받은 IP주소로 브라우저는 웹 서버에게 html 문서를 요청 (TCP/IP 프로토콜)
3. Critical Rendering Path의 단계를 거쳐 웹브라우저에 출력된다.
   3-1. HTML 파일이 바이트형태로 전달되는데, 바이트>문자>토큰>노드>객체모델(돔)로 전환 작업
   3-2. CSSOM 트리도 마찬가지로 전환 작업.
   3-3. Render Tree 생성. 제작된 DOM, CSSOM을 결합해서 생성한다.
   3-4. 레더 트리의 노드들에 대한 위치와 크기를 계산하는 단계
   3-5. 페인트. 계산된 값을 기반으로 화면에 실제로 그리는 작업. 3-4의 작업을 픽셀로 변환하여 출력
   3-6. 리플로우/리페인트.
   리플로우 :
   3-6-1. 액션이나 이벤트로 요소의 크기/위치가 변경될 때
   3-6-2. 3-4를 다시 작업
   3-6-3. 리페인트도 같이 수행
   리페인트 :
   3-6-4. 레이아웃에 영향을 주지 않는 요소(컬러, visibility)는 리페인트만 수행
   ** 리플로우 리페인트를 줄여야 위의 과정을 여러번 거치지 않아서 성능 최적화함
   3-6-5. 컴포지션 : 레이아웃과 페인트를 수행하지 않고 합성만 실행하는 단계
   ex) transform, opacity 와 같은 요소.