Internet - 5

 

Browsers and how they work?

Browser?

브라우저의 주요 기능은 서버로 요청을 보내 선택한 웹 리소스를 브라우저 창에 표시하여 제공하는 것이다. 웹 리소스는 일반적으로 HTML 문서이지만 PDF, 이미지 등 다른 유형의 콘텐츠일 수도 있다. 리소스의 위치는 URI(Uniform Resource Identifier)를 사용하여 사용자가 지정한다. 브라우저가 HTML 파일을 해석하고 표시하는 방식은 HTML 및 CSS 사양에 지정되어 있다. 이러한 사양은 웹 표준 조직인 W3C(World Wide Web Consortium) 조직에서 유지 및 관리한다. 각 브라우저는 사양의 일부만 준수하고 자체적으로 확장 개발하여 웹 호환성에 심각한 문제를 일으켰으나 현재 대부분의 브라우저는 사양을 어느 정도 준수하고 있다.

 

The browser's high level structure?

브라우저의 주요 구성요소는 다음과 같다.

브라우저 구성요소

• 사용자 인터페이스 - 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분
• 브라우저 엔진 - UI와 렌더링 엔진 간의 작업을 마샬링(한 객체의 메모리에서 저장 또는 전송에 적합한 다른 데이터 형식으로 변환하는 과정)
• 렌더링 엔진 - 요청된 콘텐츠의 표시를 담당
• 네트워킹 -  HTTP 또는 FTP와 같은 표준 프로토콜을 사용하여 네트워크 호출을 관리하는 역할을 하며 인터넷 통신과 관련된 보안 문제를 처리
• UI 백엔드 - 콤보 박스 및 윈도우와 같은 브라우저가 이미 가지고 있는 기본 위젯을 그리는 데 사용
• 자바스크립트 인터프리터 - JavaScript 코드를 구문 분석하고 실행되는 데 사용
• 데이터 저장 - 쿠키와 같은 모든 종류의 데이터를 로컬에 저장해야 될 수도 있는데 localStorage, indexedDB, WebSQL, FileSystem과 같은 저장소를 지원

Chrome과 같은 브라우저는 각 탭마다 독립적으로 별도의 프로세스에서 실행된다.

 

Rendering engine?

사용자가 특정 문서를 요청하면 렌더링 엔진이 요청된 문서의 내용을 가져오는데 요청하고 브라우저 창에 출력되기까지 다음과 같은 과정을 거친다.

Rendering engine basic flow

1. 요청된 HTML 페이지는 렌더링 엔진에 의해 외부 CSS 파일 및 스타일 요소를 포함한 청크로 구문 분석되며 그런 다음 HTML 요소는 DOM 노드로 변환되어 DOM 트리를 형성한다.

2. 동시에 브라우저는 렌더 트리도 생성하는데 여기엔 스타일 정보와 요소가 표시되는 순서를 정의하는 시각적 지침이 모두 포함된다. 렌더 트리는 콘텐츠가 원하는 순서로 표시되도록 한다.

3. 렌더 트리는 레이아웃 프로세스를 거치는데 위치 또는 크기 값을 계산하는 전 과정을 레이아웃 과정이라고 한다. 이 과정에서 DOM 노드의 정확한 위치와 크기가 할당된다.

4. 마지막 페인트 단계는 말 그대로 화면이 그려지는 단계이며 레이아웃에 계산된 위치와 크기에 따라 노드를 그린다.

 

정리하자면

HTML, CSS를 다운로드하여 각 DOM과 CSSOM으로 만든 후 렌더 트리를 형성하고 레이아웃 단계를 거쳐 노드의 위치 및 크기를 계산하여 페인팅 단계에서 그려 브라우저 창에 출력한다.

 

[출처]

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://www.browserstack.com/guide/browser-rendering-engine