[Network] Browser
in Computer Science on Network
웹 어플리케이션 구동 과정
URL Entered
- 사용자가 웹 브라우저에서 사이트 주소를 입력
DNS Lookup
- DNS를 이용하여 사이트 주소에 해당되는 Server IP 접근
Socket Connection
- Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결
HTTP Request
- Client 에서 HTTP Header 와 데이터가 서버로 전송
Content Download
- 해당 요청이 Server 에 도달하면 사용자가 원하는 문서를 다시 웹 브라우저에 전송
Browser Rendering
- 웹 브라우저의 렌더링엔진에서 해당 문서를 다음과 같은 순서로 파싱
브라우저 기본 구조
사용자 인터페이스
- 요청한 페이지를 보여주는 창 이의외 모든 부분
- 주소 표시줄, 이전 버튼, 다음 버튼, 새로고침, 정지 버튼, 홈 버튼
브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진
- 요청한 콘텐츠를 표시 : HTML을 요청하면 HTML과 CSS를 파싱하여 표시
| 브라우저 | 랜더링 엔진 |
|---|---|
| 인터넷 익스플로러 (MS) | 트라이던트(Trident) |
| 파이어폭스 (Mozilla) | 게코 (Gecko) |
| 크롬 (Google) | Webkit (27버전 이하) / Blink (28버전 이상) |
| 사파리 (Apple) | 웹킷 (Webkit) |
| 오페라 (Opera) | Webkit (14버전 이하) / Blink (15버전 이상) |
통신
- HTTP 요청과 같은 네트워크 호출에 사용됨
- 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행
- HTML을 파싱하는 도중
<script>태그를 만나게 되면 그 코드를 실행하기 위해 Javascript 엔진으로 제어 권한을 넘기고 기계어 컴파일까지 완료가 된 후 다시 마저 진행됨 - DOM 트리를 생성 하는 도중 이러한 상황이 발생하게 되면 레이아웃 단계와 그리기 단계에 늦게 도달하게 되면서 화면 출력 시간도 지연됨
UI 백엔드
- 콤보 박스와 창 같은 기본적인 장치를 그림
- 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
자료 저장소
- 자료를 저장하는 계층
- 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장
- HTML5 명세에 브라우저가 지원하는 클라이언트 스토리지가 사용되도록 정의되어 있음
- 사용자가 오프라인 상태여도 웹이 작동하도록 한 뒤, 네트워크가 다시 연결되면 데이터를 다시 동기화 할 수 있음
- 성능 향상을 위해, 동일한 자원에 대한 중복 요청을 줄일 수 있음
- 서버 인프라가 필요하지 않은 보다 쉬운 모델로 구성되어 있어 사용 효율성이 좋지만 데이터가 취향하고 여러 클라이언트가 엑세스 할 수 없으므로 중요하지 않은 데이터 위주로 사용을 권장
렌더링 엔진 작동 방식
HTML 파싱 후 DOM 트리 생성
- 바이트를 문자로 변환 -> 토큰화 -> 노드로 변환 -> DOM 트리 생성
DOM(Document Object Model) : HTML 문서의 객체들의 표현이고 외부를 향하는 자바스크립트와 같은 HTML 요소의 연결 지점
파싱 (parsing) : 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것- 파싱 결과는 보통 문서 구조를 나타내는 Node Tree
- 어휘 분석 (Tokenizing) : 문저의 자료를 토큰으로 분해하는 과정
- 구문 분석 : 언어의 구문 규칙을 적용하는 과정
CSS 파싱 후 CSSOM 트리 생성
- 브라우저가 DOM을 생성하는 동안
<head>섹션에서 style.css를 참조하는 문서의 링크 태그를 만나게 되고 브라우저는 이 리소스에 대한 처리를 요청
DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리 생성
- 렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함
- 렌더링 트리는 페이지에 표시되는 모든 DOM 콘텐츠와 각 노드에 대한 모든 스타일 정보를 갖고 있음
렌더 트리 배치
- 뷰포트 내에서 노드의 정확한 위치와 크기를 계산
렌더 트리 그리기
- 렌더링 트리의 각 노드를 화면에서의 실제 픽셀로 변환
