Q8) Browser rendering(Interview Question in HTTP) #19

[ku-kim]

Browser rendering이란 무엇인가요? (분량 제한 없음🗣)
브라우저의 렌더링 과정을 설명해주세요. ex) 크롬 검색창에 https://naver.com을 입력하고 엔터를 눌렀을 때 부터 네이버 메인 페이지가 나오기까지 🙃

[ku-kim]

(생각해보니 문제가 넘 어려운거같기도... )

[365kim]

• https://naver.com + 엔터 입력

[ku-kim]

웹 브라우저는 다른 프로그램과 마찬가지로 PC에서 실행되면 프로세스로 변경되어 CPU, RAM에 올라가 실행되게됩니다.
이때 최상위 브라우저 프로세스(부모프로세스)와 여러 자식 프로세스들 간의 IPC(Inter Process Communucation)을 통해 통신하고 최종적으로 유저에게 화면을 보여주는 방식으로 구현되어 있습니다. (그 구현 방식으론 브라우저 마다 디테일한 구현은 다 다름)

• CORS가 적용할 수 있었던 이유
  

---

크롬 검색창에 https://naver.com을 입력하고 엔터를 눌렀을 때 부터 네이버 메인 페이지가 나오기까지

1. https://naver.com 텍스트를 검색창에 입력하는 순간

• 검색창인가? URL인가 파싱 체크

2. 파싱이 종료되면 해당 컨텐츠를 가져오기 위해 UI 쓰레드가 네트워크 요청 초기화

• 해당 컨텐츠 서버, 파일에게 요청 메세지 전송
  

3. 응답 읽기

• 응답이 HTML 파일이면 렌더러 프로세스에 데이터를 전달, 만약 zip파일이면 다운로드 요청하라는 뜻이므로 다룬오드 매니저에 데이터 넘김

1. 브라우저 프로세스 안의 ui 쓰레드 -> 네트워크 쓰레드
   

2. 브라우저 프로세스의 ui쓰레드 + 네트워크 쓰레드 -> 렌더러 프로세스의 메인 쓰레드에게 데이터 전송
   

4. 렌더러 프로세스

• 렌더러 프로세스의 핵심 역할 : HTML, CSS ,JS를 사용자가 인터렉션 할 수 있는 웹 페이지로 만드는 것

1. 파싱

• DOM(Document Object Model) 생성 (HTML을 파싱하기 시작)

2. 추가 리소스 로딩

• HTML파일의 비어있는 부분 (img, link, style . . .)의 CSS, JS, 외부 리소스, 캐쉬을 채움

3. 스타일 계산

• DOM을 어떻게 계산하여 보여줄 지 CSS selector에 기반하여 계산

4. 레이아웃

• 1~3 과정을 거쳐, 문서의 구조, 각 노드에 대한 스타일을 알게 되었으니 각 노드의 위치, 레이아웃을 잡아줌

5. 페인팅

• 어떤 순서로 그릴 지 판단함 (css의 z-index 문제)
  

6. 컴포티징

• 수 많은 노드들을 레이아웃 기준으로 잡고 페이지를 그리자

그 외 수 많은 과정을 거쳐 ...

naver.com 페이지가 켜졌습니다..

---

문제 제출 실패..

참고)
DOM 이란 ? : https://medium.com/@euncho/dom-101-ed14cff6e2ce
구글 크롬, 모던 웹 브라우저 들여다 보기 : https://developers.google.com/web/updates/2018/09/inside-browser-part1?hl=ko

[joey-ful]

렌더링 엔진

요청한 컨텐츠를 브라우저 화면에 표시

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
2. 서버로부터 받은 HTML, CSS 다운
3. HTML과 CSS를 파싱해 DOM 트리와 CSSOM 트리 구축
   
   
4. DOM트리와 CSSOM 트리를 결합해 렌더 트리 구축 (화면에 표시되는 것만 표시)
   
5. 렌더 트리 그리기 (픽셀화)

[SeongsangCHO]

즉석
naver.com 검색시 dns서버에서 ip를 찾음
찾으면 해당하는 서버에서 요청을 받아 해당하는 리소스를 응답함
먼저 html, css를 받음.. ㅇㅅㅇ