Chrome 2: Navigation

https://developer.chrome.com/blog/inside-browser-part2

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

 

Simple Navigation

Step 1: Handling Input

• Browser Process 내부의 UI Thread
  • 주소창 = 입력창(ui)이니까
  • 입력값 파싱 → 주소인지 검색어인지 판단

Step 2: Start Navigation

• UI Thread
  • 네트워크 요청 시작시킴
• Network Thread
  • 요청 실행 (DNS lookup, establishing TLS connection 등 포함)
  • 301 Redirect 같은 응답을 받으면 다시 UI Thread에게 전달

Step 3: Read Response

• Network Thread
  • 필요한 경우 MIME Type Sniffing 수행
    • Multipurpose Internet Mail Extensions
    • MIME 타입이 없거나 브라우저가 잘못된 MIME 타입이라고 생각하는 경우, 실제 리소스의 바이트를 보고 MIME 타입을 추측함
    • 실제 실행 가능한 콘텐츠를 몰래 미리 읽어보는거라 보안상 문제가 있긴 함
    • 서버에서 X-Content-Type-Options: nosniff 로 스니핑 방지 가능
  • HTML이면 Renderer process에게 전달
  • 그냥 파일 다운이면 Download manager에게 전달
  • SafeBrowsing check (도메인과 응답을 보고 알려진 스팸사이트인지 확인)
  • CORB (Cross-Origin-Read-Blocking, 다른 출처의 응답을 읽어서 웹페이지에 적용하는걸 방지)

Step 4: Find a Renderer Process

• Network Thread
  • UI Thread에게 데이터 준비완료! 신호 보냄
• UI Thread
  • renderer process를 찾아 렌더링 계속하라고 시킴
  • 최적화
    • step 2에서 미리 렌더러 프로세스를 준비시켜놓음

Step 5: Commit Navigation

• IPC
  • Browser process → Renderer process
  • navigation을 commit 시킴
• Browser process
  • renderer commit 완료했다는 연락 받으면 navigation complete
  • 주소창에 새로운 주소에 대한 정보 반영
  • 방문기록 업데이트

Extra Step: Initial Load Complete

• Renderer Process
  • 페이지 렌더링 시작
  • 최초 렌더링 완료 후 IPC를 통해 브라우저에게 연락
• UI Thread
  • 렌더링 완료 IPC 받으면 브라우저 탭바에 로딩중.. 표시를 없앰

다른 페이지로의 전환

beforeunload event

• ‘simple navigation’ 하기 전, 현재 페이지에서 beforeunload 이벤트 처리가 필요한지 확인해야 함
• beforeunload 핸들러는 내비게이션 시작 전에 실행되어야 함 → 성능 이슈 O, 필요할 때만 쓰기
• 주소창에 새 주소를 입력한 경우
  • 페이지 내 자바스크립트 역시 renderer process가 주관 → browser process는 이 친구랑 협의를 봐야 함
• 페이지 내의 어떤 행동으로 인한 이동의 경우
  • 애초에 renderer process부터 시작된 일 → beforeunload 확인 후 browser process에게 navigation 시작하라고 알림

다른 사이트로 이동할 경우

• 현재 render process → unload 같은 이벤트 핸들링 담당
  새로운 render process → 새로운 navigation 담당

Service Worker

개념

• 어플리케이션, 브라우저, 네트워크 사이의 프록시 역할 수행
• 로컬 캐시 관리를 통해 네트워크 요청 전에 캐시를 보여주거나, 특정 조건을 만족해야만 네트워크 요청하도록 조절 가능

이 얘기를 하는 이유

• Service worker → 자바스크립트 → renderer process에서 돌아감
  주소창 navigation → browser process에서 돌아감

처리

• service worker
  • 등록 시 scope가 저장됨
• network thread
  • navigation 발생 시 도메인과 등록된 service worker들의 scope를 확인
• ui thread
  • 해당 도메인에 등록된 service worker가 있다면
    renderer process를 찾아서 실행하라고 시킴
• renderer process (worker thread)
  • 캐시를 불러와서 네트워크 요청을 할 필요 없게 만들거나
  • 오히려 다른 것들도 달라고 요청

navigation preload

• service worker가 결국 네트워크 요청을 하기로 결정하면 그 왔다갔다 시간은 낭비되는거임
• ui thread
  • service worker 실행시키라고 하면서
  • 동시에 network thread에게 요청도 보내라고 실행 (병렬 방식)
  • service worder에서는 preload response를 활용해서 미리 보내놓은 요청의 응답 활용
• Service-Worker-Navigation-Preload 헤더 사용
  → 서버에게 service worker에서 응답을 쓸거라고 알려줌
  → 일반 fetch() 랑 다른 형태의 응답을 내려줄 수 있음