웹 브라우저 작동 방식

웹 브라우저는 웹을 사용할 수 있는 가장 기본적인 방식이다.
브라우저가 작동하는 순서대로 정리하고 각 구조에서 어떤일을 하는지 자세히 정리해보려고 한다.

사용자 인터페이스

웹 브라우저에서 사용자가 직접 상호작용 할 수 있는 화면 부분이다.
불러올 정보의 위치가 작성되는 URI 주소 표시줄, 이전, 다음, 새로고침, 중지, 북마크, 홈버튼 등 사용자와 직접 상호작용 할 수 있는 GUI 그 자체이다.

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
데이터 스토리지를 참조하고 로컬에서 데이터를 쓰고 읽고 다양한 작업을 한다.
URI로부터 자원을 받았을때 HTML과 CSS등의 웹 문서라면 렌더링 엔진을 통해 화면에 보여주도록 한다.
PDF 등의 문서라면 추가 기능등으로 화면에 해당 문서를 바로 보여주게 된다.

렌더링 엔진

웹 문서를 보여주도록 화면에 보여주는 핵심이다.
브라우저마다 각각 다른 렌더링 엔진을 사용한다.

• 인터넷 익스플로러: Trident
• 파이어폭스: Gecko
• 사파리: Webkit
• 크롬, 오피라, 엣지: Blink(Webkit의 포크버전)

렌더링 엔진의 상세 과정

1. HTML 문서를 파싱하여 DOM 트리를 만든다. (text -> DOM)
   1. 서버로부터 바이너리 파일을 받는다.
   2. meta 태그의 charset에 지정된 인코딩방식에 따라 문자열로 파싱한다.
   3. 시작태그, 컨텐츠, 종료태그 등을 인식하여 토큰으로 만든다.
   4. 토큰을 각각의 노드로 변환한다.
   5. 모든 노드의 자식 부모 관계를 확인하여 네트워크 트리 형태로 만든다.(DOM)
2. CSS 문서를 파싱하여 CSSOM 트리를 만든다. (text -> CSSOM)
   1. DOM을 생성하다가 style 태그를 만나게 되면 DOM 생성을 중지하고 CSSOM을 생성한다.
   2. DOM과 같이 문자 -> 토큰 -> 노드 -> CSSOM 순서로 진행된다.
3. 자바스크립트를 파싱한다.
   1. script 태그를 만나면 DOM 생성을 중지하고 자바스크립트엔진에게 제어권을 넘긴다.
   2. 자바스크립트엔진은 토크나이징 -> 구문분석 -> 바이트코드 -> 인터프리터 실행 과정을 거친다.
   3. 즉, 렌더링 도중 제어권이 넘어가므로 태그 가장 마지막에 자바스크립트 코드를 넣는것이 좋다.
4. DOM과 CSSOM 트리를 결합해서 렌더 트리를 만든다.
   1. DOM트리를 루트부터 탐색하되 화면에 표시되지 않는 노드는 제외한다.
   2. css 속성중 display:none 되면서 화면에서 숨겨지는 노드도 제외된다.
   3. DOM 노드에 대해 일치하는 CSSOM 노드를 찾아서 적용한다.
   4. 화면에 표시되는 노드를 컨텐츠와 스타일을 계산하여 렌더트리로 생성한다.
5. 레이아웃: 렌더 트리에서의 각 노드의 크기의 위치를 계산한다.
6. 페인팅: 레이아웃 처리가 완료된 렌더 트리를 실제 화면에 그려낸다.
7. 리페인트: 화면의 구조가 변경되지 않을 때는 리페인트만 진행된다.
   • opacity, background-color, visiblity, outline 등 노드의 위치가 변하지 않을때 작동한다.
8. 리플로우: 화면의 구조가 변경 되었을 때는 리페인트와 함께 리플로우가 진행된다.
   • 노드의 추가, 제거
   • 노드의 위치, 크기 변경
   • 애니메이션과 트랜지션
   • 폰트, 텍스트, 이미지 변경
   • 윈도우 리사이징
   • 초기 렌더링 등