브라우저 기본 동작 원리

브라우저 구성 요소

• 사용자 인터페이스(UI)
  • 주소를 입력하거나 뒤로가기 버튼을 누르는 등 요청한 페이지를 보여주는 영역을 외에 사용자가 컨트롤 할 수 있는 나머지 모든 부분
• 브라우저 엔진
  • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어함. 예를들어, 사용자가 뒤로가기 버튼을 누르면, 그걸 렌더링 엔진으로 전달해주는 전달자 역할
• 렌더링 엔진
  • 요청한 url를 브라우저 엔진에서 받고, 서버에 요청.
  • 서버로부터 전달받은 웹 페이지 관련 데이터 (HTML, CSS, JS)를 파싱(브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환)한 후 렌더링.
• 통신
  • 렌더링 엔진의 HTTP 요청 등을 받아서 네트워크를 호출하고 전달.
• 자바스크립트 해석기
  • JS 코드를 파싱 및 실행
• 자료 저장소
  • 쿠키, 로컬 스토리지 등 로컬 영역에 저장해야 하는 자료들을 하드디스크에 저장.
• UI 백엔드
  • 렌더트리(화면에 보이는 모든 노드, 콘텐츠, 스타일 정보를 병합한 최종 출력물)를 브라우저에 그리는 역할.
    
    [img출처]

브라우저 렌더링 과정

내가 주소창에 'https://velog.io/@kde9889' 를 검색하면 일어나는 일

1. 나(user)가 사용자 인터페이스 주소표시줄에 url을 입력하여 브라우저 엔진으로 전달한다.
2. 브라우저 엔진은 먼저 자료 저장소에서 해당 url에 해당하는 자료를 찾고, 만약 해당 자료가 쿠키로 저장되어있다면 그 자료를 렌더링 엔진에 전달한다. (자주 접속하는 사이트 등) -> 이 경우 통신까지 안가도 됨.
3. 만약 자료 저장소에 해당 자료가 없다면, 서버(통신)로 가서 자료를 받아와야 하기 때문에 브라우저 엔진은 렌더링 엔진으로 주소값을 전달함.
4. 렌더링 엔진에 전달받은 주소를 통신 레이어에 전달.
5. 통신 레이어가 전달받은 값으로 서버에 웹 페이지 관련 데이터 (JS, html, css)를 요청해서, 서버로부터 응답받은 데이터를 다시 렌더링 엔진에 전달함.
6. 렌더링 엔진이 전달받은 정보(HTML, CSS, image 등)를 파싱(텍스트 형식의 HTML, CSS를 \Object Model로 만듦.HTML -> DOM Tree, CSS -> CSSOM)
7. 렌더링 엔진이 받은 자바 스크립트 자료를 자바스크립트 해석기로 전달해서 파싱
8. 6번, 7번에서 파싱한 결과를 토대로 렌더링 엔진에서 DOM트리를 조작하고 렌더트리로 바꿔서 UI백엔드로 전달
9. UI백엔드가 렌더 오브젝트(렌더트리 구성요소) 정보를 받아서 브라우저 렌더랑 화면에 띄워줌.