Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ku-kim opened this issue Oct 25, 2020 · 5 comments
Open

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

ku-kim opened this issue Oct 25, 2020 · 5 comments
Labels

Comments

@ku-kim
Copy link
Member

ku-kim commented Oct 25, 2020

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

@ku-kim ku-kim added the HTTP label Oct 25, 2020
@ku-kim ku-kim changed the title 8)Browser rendering(Interview Question in HTTP) #18 8)Browser rendering(Interview Question in HTTP) #19 Oct 25, 2020
@ku-kim
Copy link
Member Author

ku-kim commented Oct 25, 2020

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

@ku-kim ku-kim changed the title 8)Browser rendering(Interview Question in HTTP) #19 Q8) Browser rendering(Interview Question in HTTP) #19 Oct 25, 2020
@365kim
Copy link
Member

365kim commented Oct 28, 2020

@ku-kim
Copy link
Member Author

ku-kim commented Oct 29, 2020

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

image

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

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

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

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

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

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

3. 응답 읽기

  • 응답이 HTML 파일이면 렌더러 프로세스에 데이터를 전달, 만약 zip파일이면 다운로드 요청하라는 뜻이므로 다룬오드 매니저에 데이터 넘김
  1. 브라우저 프로세스 안의 ui 쓰레드 -> 네트워크 쓰레드
    image

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

4. 렌더러 프로세스

  • 렌더러 프로세스의 핵심 역할 : HTML, CSS ,JS를 사용자가 인터렉션 할 수 있는 웹 페이지로 만드는 것
  1. 파싱
  • DOM(Document Object Model) 생성 (HTML을 파싱하기 시작)
  1. 추가 리소스 로딩
  • HTML파일의 비어있는 부분 (img, link, style . . .)의 CSS, JS, 외부 리소스, 캐쉬을 채움
  1. 스타일 계산
  • DOM을 어떻게 계산하여 보여줄 지 CSS selector에 기반하여 계산
  1. 레이아웃
  • 1~3 과정을 거쳐, 문서의 구조, 각 노드에 대한 스타일을 알게 되었으니 각 노드의 위치, 레이아웃을 잡아줌
  1. 페인팅
  • 어떤 순서로 그릴 지 판단함 (css의 z-index 문제)
    image
  1. 컴포티징
  • 수 많은 노드들을 레이아웃 기준으로 잡고 페이지를 그리자

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

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
Copy link
Contributor

joey-ful commented Oct 29, 2020

렌더링 엔진

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

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

@SeongsangCHO
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants