카테고리 없음

브라우저에 URL 을 입력하면?

Jenner 2023. 12. 14. 08:16

 

 

최신 웹브라우저 들여다보기 (1부)  |  Blog  |  Chrome for Developers

브라우저가 코드를 개략적인 아키텍처에서 구체적인 렌더링 파이프라인에 이르기까지 제대로 작동하는 웹사이트로 변환하는 방법을 알아보세요.

developer.chrome.com

글의 목표


하드웨어와 소프트 웨어의 용어설명을 기반으로
1브라우저의 화면 그리는 단계 중
브라우저가 그리기 위해 필요한 파일을 가져오는 단계에 대해 설명

 

 

목차 

1. 하드웨어 

2. 소프트웨어

3. 프로세스 

4. 브라우저에 URL입력 후 엔터치면 웹사이트가 보일 때까지의 과정

 

 

1. 하드웨어


1. CPU(Central Processing Unit)

   CPU는 다양하고 좀더 복잡한 연산 작업들을 처리할 수 있는 중앙 처리장치 

   Core (각종 연산 수행. Thread단위로 Core단위에 맵핑 

2. Memory (RAM, ROM)

   기억장치. 메모리안에 데이터를 기억함!

3. GPU 단순작업 처리 및 다른 연산도 할 수 있음 

4. Control Unit 

 

 

 

2. 소프트웨어


 

 

기본프로그램 :  운영체제 (하드웨어를 제어하고 응용프로그램을 실행함)

응용프로그램  : 브라우저도 응용프로그램의 한 종류 

 

 

 

최신 웹브라우저 들여다보기 (1부)  |  Blog  |  Chrome for Developers

브라우저가 코드를 개략적인 아키텍처에서 구체적인 렌더링 파이프라인에 이르기까지 제대로 작동하는 웹사이트로 변환하는 방법을 알아보세요.

developer.chrome.com

 

 

3. 프로세스


 

프로그램OS에 의해 memory 영역을 할당 받고 실행중인 것

 

구성요소 

Code : PC(다음번에 실행될 명령어의 주소를 갖고있는 레지스터)

Data : 글로벌 변수, 스태틱 변수 저장 

Stack : 프로세스가 할당된 자원을 이용하는 실행의 단위, 임시데이터 (로컬변수등 저장) 

  - 우리가 작성한 코드가 실행되는 흐름. 그걸 스레드라고 부름

Heap : 메모리 관리 (동적 메모리 할당도 가능)

 

  

 

 

다음글 

https://wha-haha.tistory.com/237

 

멀티 프로세스 브라우저의 아키텍처

1. 프로세스 2. 스레드 3. CPU의 코어 와 프로세서 4. 멀티 프로세스 아키텍처 1. 프로세스 멀티 프로세스와 싱글 프로세스 멀티프로세스 프로세스란 프로그램이 OS에 의해 메모리 영역을 할당 받고

wha-haha.tistory.com

 

 

 

4. 브라우저에 URL입력 후 엔터치면 웹사이트가 보이기 직전까지의 과정


 

1. handling inputs 

Browser process안에 UI Thread가 text를 search query or URL판단 

search query면 search engine으로 query를 보내서 검색  

URL이면 network thread로 url값 전달 준비

 

 

2. start Navigation : user가 enter를 입력하면 

UI thread가 networkcall initiates

 Loading spinner 탭 왼쪽에 그림

Network thread가 protocol 활용 DNS에 연결, TLS connection 생성

    HTTP301 response오면 UI thread로 redirect

 

 

3. read response

response body가 network thread로 들어올 때, 

response header의 content-type으로 type확인

type 확인하려 mime type sniffing 

content type이 HTML형식이면 renderer process에게,아니면 download manager에게 파일전달 준비 

safe browsing 에서 known malicious site이면 warning page 보여줌 

CORB (Cross Origin Read Blocking)

 

 

4. find renderer process: network thread가 확인이 끝난 후 브라우저가 사이트 이동해야 할때 

 UI thread가 미리 찾아놓은 renderer process에게 data(HTML file)를 전달 

 

 

5. commit navigation

browser process가 renderer process 에게 ipc 보냄 

data stream도 보냄 renderer process 로부터 commit navigation이 되었다는 confirmation을 들으면 

navigation은 끝나고 document loading phase가 시작됨