브라우저 렌더링 과정

DNS 조회

1. 사용자가 브라우저에 웹사이트 주소를 입력
2. 브라우저가 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버에 쿼리 요청
3. DNS 서버는 해당 도메인의 IP 주소를 찾아 응답

TCP 핸드셰이크와 TLS 협상(~HTTP/2.0)

1. TCP 핸드셰이크 과정을 통해 서버와 연결
2. TLS 협상을 통해 서버 인증과 암호화 실행

https://tak-fe.tistory.com/20

[TCP Handshak

3-Way-Handshak TCP/IP 프로토콜을 이용한 통신에서 데이터를 주고받기 전 연결 과정 순서 클라이언트는 서버에 접속을 요청하는 SYN(M) 패킷을 보낸다. 서버는 클라이언트의 요청 패킷을 받고 요청을

tak-fe.tistory.com](https://tak-fe.tistory.com/20)

https://tak-fe.tistory.com/24

[HTTP & HTTPS

HTTP 웹 상에서 클라이언트-서버가 데이터를 주고받기 위한 통신 프로토콜 html, css, js, 이미지, 폰트 등 전송 클라이언트 요청(requests) 서버 응답(responses) GET(요청), POST(작성), PUT(수정), PATCH(일부 수

tak-fe.tistory.com](https://tak-fe.tistory.com/24)

HTTP Get 요청

1. 처음에 HTML 파일을 로드
2. 이후 렌더링 과정에서 HTML 파일과 nested 파일에 포함된 css, js, 이미지 파일들을 요청

렌더링

1. HTML을 처리하여 토큰화(<>, </> 기준으로 ), DOM 트리 생성
   • 내가 작성한 HTML을 프로그래밍 언어가 접근할 수 있도록 만듬
   • async defer 가 아닌 <script> 태그 만나면 중지
   • Preload Scanner가 미리 자원 요청(css, async script, web fonts)
2. CSS를 파싱 후, CSSOM 트리를 생성
3. Render Tree 생성(CSSOM과 DOM을 결합)
4. Layout (뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산)
5. Paint(텍스트, 색깔, 경계, 그림자, 이미지 등을 픽셀로 변환)
6. Compositing(페인팅 된 각각의 레이어를 합성해서 출력)

리렌더링

1. js가 style을 바꾸면 다시 style 계산
2. Reflow
   • Reflow -> Repaint -> Recomposite 전부 일어남
   • 뷰포트 크기 변경, 노드가 추가-삭제, 요소의 위치 크기-변경, 이미지 크기 변경
   • position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow , text-align , vertical-align , white-space, left, top...
3. Repaint
   • Repaint -> Recomposite 일어남
   • 색 변화, 두께 변화
   • background, text-decoration, border-style, border-radius , box-shadow , color , line-style , outline , visibility...
4. Composite
   • Recomposite만 일어남
   • transform , opacity , cursor , perspective...