웹 페이지의 로드 과정과 브라우저의 작동 원리

웹 페이지 로드 과정

Prompt for unload

특정 페이지에서 다른 페이지로 이동할 때 발생한다. 해당 페이지에서 벗어난다는 신호이다.

unloadEventStart에서 window에 beforeunload라는 이벤트가 발생한다.

Redirect

서버에서 Redirection 신호를 보낼 때 발생한다.

AppCache

서버에서 데이터를 받아오기 전에 브라우저에 캐시가 있는지 확인

DNS, TCP, Request, Response

내부 네트워크 처리 단계

Processing [핵심]

웹 페이지 파일을 파싱하는 과정 (html, css, js, 이미지, 폰트 등등)

• domInteractive, domComplete
  • document에 readystatechange 이벤트를 발생시킨다.
  • 로딩화면 구현에 종종 사용된다.
• domContentLoadedEventEnd
  • document에 DOMContentLoaded 이벤트를 발생시킨다.
  • 이 시기에는 DOM 트리를 만들고, 화면에 그리기 전에 JavaScript를 주입한다.

Load

CSS, 이미지, 동영상 등 필요한 리소스를 다운로드 받는다.

• loadEventEnd
  • window에 load 이벤트를 발생시킨다.

브라우저의 주요 구성 요소

유저 인터페이스(User Interface)

브라우저에서 웹 페이지를 제외한 나머지, 사용자가 인터렉션 할 수 있는 영역

브라우저 엔진(Browser Engine)

사용자 인터페이스와 렌더링 엔진의 브릿지 역할을 한다.

렌더링 엔진(Rendering Engine)

실제로 웹 페이지를 렌더링하는 엔진이다.

통신(Networking)

HTTP 요청과 같은 네트워크 요청에 사용된다.

JavaScript 해석기(JS Engine)

자바스크립트를 해석한다.

UI 백엔드(UI Backend)

콤보 박스, 다이얼로그와 같은 브라우저 인터페이스를 그린다.

데이터 저장소(Data Persistence)

쿠키나 파일과 같은 브라우저 데이터를 저장한다.

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 즉, 각 탭은 독립된 프로세스로 처리된다. (그래서 메모리를 많이 먹나보다...)

렌더링 엔진

렌더링 엔진은 서버로부터 요청 받은 내용을 브라우저의 화면에 표시하는 일을 한다.

렌더링 엔진은 HTML, XML 문서, 이미지를 표시할 수 있다. 플러그인, 브라우저 확장 기능 등을 이용해 PDF와 같은 다른 리소스도 표현할 수 있다.

렌더링 엔진의 종류

• Chrome의 V8
• Safari의 WebKit
• Firefox의 Gecko~~(개코..?)~~...

렌더링 엔진의 동작 과정

1. HTML 문서를 파싱하고 변환하여 DOM(Document Object Model) 트리를 생성한다.
2. 외부 CSS 파일과 함께 인라인 스타일 요소를 파싱하고 변환하여 CSSOM(CSS Object Model) 트리를 생성한다.
3. DOM 트리와 CSSOM 트리를 이용하여 렌더 트리를 생성한다.
4. 렌더 트리의 생성이 종료되면, 렌더 트리의 각 노드들을 정확한 위치에 배치하고 다양한 값을 계산한다.
5. 브라우저의 실제 화면에 그리기 과정을 한다.