기록하는 개발자

0418_ 브라우저 작동원리 본문

취업스터디

0418_ 브라우저 작동원리

hannah1009 2022. 4. 18. 17:35
728x90

 

순서 요약 : 

 

(1) 사용자가 브라우저를 통해 웹사이트에 접속

(2) 브라우저는 DNS를 통해 웹서버의 아이피 주소를 파악

(3) 브라우저와 서버가  3 way handshake 완료

(4) 브라우저가 서버에 데이터를 요청 req <-> 서버가 브라우저로 res 

 

(5) 파싱해서 화면 그리기:

  HTML 파싱 DOM tree -> 중간에 스타일 태그 발견 -> css 파싱 CSSOM tree 생성 ->

  js 나오면 js 엔진에게 권한을 넘겨 js 코드 파싱 AST 생성 후 실행 ->

  DOM + CSSOM = render tree [ construction ] ->

  랜더트리의 노드 배치 -> 화면에 ui 그려짐 ->

  마지막으로 노드들의 레이어를 순서대로 구성하는 composition [ operation 과정 ] ->

(6) 사용자에게 화면 출력

 

* DNS 

(1) 도메인 이름을 입력해도 원하는 웹 사이트로 갈 수 있도록 하는것

(2) 사람이 읽을 수 있는 이름을 192.0.2.1과 같은 숫자 IP 주소로 변환하여 컴퓨터가 서로 통신할 수 있도록

(3) DNS 서버는 이름을 IP 주소로 변환하여 도메인 이름을 웹 브라우저에 입력할 때 최종 사용자를 어떤 서버에 연결할 것인지를 제어

 

* 3 way handshake 

 

 

• 양쪽 모두 데이타를 전송할 준비가 되었다는 것을 보장하고, 실제로 데이타 전달이 시작하기전에 한쪽이 다른 쪽이 준비되었다는 것을 알수 있도록 한다.

 양쪽 모두 상대편에 대한 초기 순차일련변호를 얻을 수 있도록 한다

 

출처: https://mindnet.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-22%ED%8E%B8-TCP-3-WayHandshake-4-WayHandshake

'취업스터디' 카테고리의 다른 글

0420_ Stack, Queue  (0) 2022.04.20
0420_ JWT, OAuth  (0) 2022.04.20
0419_ URL&URI, NPM  (0) 2022.04.19
0419_ OOP ; 객체지향 프로그래밍  (0) 2022.04.19
0418_ 변수, 호이스팅, node.js 정의  (1) 2022.04.18
Comments