밤토리
728x90

1. 사용자가 브라우저를 통해 웹사이트 접속 (www.naver.com)
2. DNS를 통해 HOST의 IP주소 파악 (웹브라우저가 DNS 에게 물어봄)
3. 브라우저와 서버가 3-Way Handshake과정을 거치는데 이는 데이터를 주고받기위한 랜덤한 번호표를 주고 받음
4. http request : 브라우저 -> 서버에게 데이터 요청
5. http response : 서버 ->  브라우저에게 데이터를 보내줌

6. 주고받은 데이터 출력
7. 브라우저는 w3c 명세에 따라 html과 css 파싱 (=해석하는 것을 파싱이라 함)
-------------------- Contstruction ----------------------
1. HTML 파싱 → DOM Tree 생성
2. 렌더링 엔진이 <style>태그가 나오면 : CSS 파싱 → CSSOM Tree 생성
3. <script> 태그가 나오면 : 자바스크립트 엔진 →  추상구문 트리 AST 만들고 실행(Abstract Syntax Tree)
4. DOM tree + CSSOM tree = Render Tree 생성
-------------------- Operation ----------------------
5. Layout : Render Tree에 있는 Node를 배치 (렌더링 엔진)
6. Paint : Render Tree에 있는 Node의 UI를 그림 (UI Backend)
7. Composition : Render Tree에 있는 Node를 z-index가 낮은 것부터.순서대로 구성 
-------------------- Display ----------------------
8. 웹 사용자에게 결과 화면 출력

 

 

 

728x90

'IT기술용어 > CS지식' 카테고리의 다른 글

[쿠버네티스] Kubernetes란?  (0) 2022.10.20
profile

밤토리

@밤토리아이티

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!