브라우저 렌더링

브라우저 렌더링, www.google.com 을 주소창에서 입력하면 일어나는 일

1. 사용자가 주소창에 URL에 작성
2. DNS가 실제 서버를 찾음
   • 웹브라우저가 캐싱된 DNS 기록 뒤져봄(없으면 다음)
   • 웹브라우저가 DNS에게, HTTP를 사용해 HTTP request:입력된 도메인 주소
   • DNS가 웹 브라우저에게, response:IP주소
   • 웹브라우저가 웹서버에게, IP주소 이용해 request:html문서 🤔HTTP Request

3. 웹서버에서 사용자가 요청한 파일(HTML 파일) 보내줌 🤔HTTP response?
   (여기서부터 CSR, SSR 갈림)

4. 웹서버는 웹브라우저에게, response: html문서결과
   - 웹서버는 정적인 컨텐츠(html, css) 처리

   • 웹서버는 WAS에게, 동적인 컨텐츠(jsp) 처리 요청하고 그 결과 웹서버로 전송
     
     

   • 렌더트리(=DOM 트리 + CSSOM 트리) 생성/배치
     - HTML 파싱(브라우저 렌더링 엔진은 HTML 파싱 + DOM 트리 구축) 시작
     
     - if encounter link 태그, stop HTML 파싱, request CSS 파싱
     - response : 서버로부터 CSS 파일을 내려받음
     - 브라우저 렌더링 엔진은 CSS 파싱 + CSSOM 트리 구축
     
     - if CSS 파싱 done, start HTML 파싱
     
     - if encounter JS, start JS 파싱 (JS는 DOM API를 통해 DOM/CSSOM 변경가능, 변경된 DOM/CSSOM는 다시 렌더트리로 결합)
     - 서버로부터 JS를 내려받음
     - 브라우저의 자바스크립트 엔진은 JS 컴파일(Abstract Syntax Tree 생성 + AST를 바이트코드로 변환) + 실행

   • layout or reflow : 노드 위치/크기 계산

   • painting : 계산된 값을 실제 픽셀로 변환

   • 브라우저는 화면에 웹페이지 내용물 출력

• Reflow : 렌더 트리를 재생성하는 과정
• Repaint : after Reflow, 재생성된 렌더 트리를 다시 그리는 과정 (color처럼 레이아웃 수치에 영향을 끼치지 않는 것은 reflow🙅 repaint 과정만🙆)
  
  
  https://d2.naver.com/helloworld/59361
  https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/How_CSS_works
  https://watermelonlike.tistory.com/170

운영하는 사이트의 렌더링 시간이 길어질 때 왜 길어지는지 개발자로서 확인해야 하는 것

1. 이미지를 렌더링하는 시간(고해상도, 벡터 이미지) 때문일 수 있으니 이미지 파일 크기 확인해보기 (개발자도구 네트워크나 퍼포먼스 탭)
2. 개발자 도구 열어서 태그가 중첩되었는지 확인하고(깊지 않게 짜야함) 마크업 최적화하기

초기 렌더링 속도
https://toss.tech/article/faster-initial-rendering