3. browser의 동작

browser의 동작

Why we should know 'browser'?

: 웹을 통해 전달되는 데이터는 어딘가에서 해석되어야 함.
서버에서 전송한 HTML과 같은 데이터가 클라이언트에 도착하는 곳이 'browser'
Browser에는 데이터를 해석해주는 'Parser'와 데이터를 화면에 표현해주는 'Rendering Engine'이 포함되어 있으며, 브라우져 마다 다른 종류의 Redering Engine 사용
이런 작업의 대부분은 browser 내부에서 이루어지기 때문에 반드시 알아야 하는 것은 아님. 그러나 browser의 내부를 이해하면 웹 개발을 하며 맞닥뜨리는 난해한 문제들의 해결이 가능하고, 보다 최적화된 웹 개발을 할 수 있음.

browser의 구성

1. The user interface: 주소창, 뒤로가기/앞으로가기 버튼, 즐겨찾기 메뉴 등을 포함하는 인터페이스. 사용자가 요청하여 보고 있는 화면 페이지를 제외한 모든 브라우저의 부분이 모두 인터페이스
2. The browser engine: UI와 Rendering engine 사이에 발생하는 action들을 정렬시키는 역할 수행
3. The rendering engine: 사용자가 요청한 콘텐츠를 화면에 보여주는 역할을 담당 아래에 다시 자세히 설명
4. Networking: HTTP request와 같은 네트워크 요청을 위한 부분으로, 사용자가 사용하는 플랫폼에 맞는 작업을 수행
5. UI backend: 콤보 박스들과 화면 등의 기본 위젯들을 그리는데에 사용되며, 사용자의 플랫폼에 따라 다른지 않은 'generic'한 인터페이스를 사용자에게 보여줌.
6. JavaScript interpreter: JavaScript 코드를 Parsing하고 실행하는데 사용
7. Data storage: browser 또한 데이터들을 browser 내에 cookie와 같은 형태로 저장할 필요가 있기 때문에 존재하는 지속적 계층. 때문에 browser 역시 localStorage, IndexedDB, WebSQL 그리고 FileSystem과 같은 storage mechanism을 지원

The flow of Rendering Engine

1. 네트워크 레이어에서 사용자가 요청한 문서의 콘텐츠들을 가져오는 것으로부터 시작되며, 대개 8KB 단위로 쪼개져서 가져옴
2. HTML 문서를 Parsing 하여 **'Content Tree'**라고 불리는 DOM(Document Object Model)node로 구성된 Tree 형성
3. 외부 CSS 파일과 style elements 내에 존재하는 style data들을 Parsing 한 후, Style 정보들과 HTML의 visual instruction들을 더해 'Render Tree' 형성
4. Render Tree의 각 node들이 각각 화면 내의 정해진 위치에 자리하도록 Layout 과정 수행
5. UI backend 계층을 이용하여, 자신의 알맞은 자리에 위치한 node들을 Painting

• 이해를 돕기 위해 점진적 절차에 따라 설명이 되었지만, 실제로는 보다 나은 사용자 경험(UX)을 위해 Redering Engine은 모든 HTML이 Parsing될 때 까지 기다리지 않고 해석된 HTML 문서들을 바로 Layout과 Painting 작업으로 보냄. Parsing되지 않은 문서들은 지속적으로 절차에 따른 작업 수행

Main flow examples(WebKit in Safari)

cf. Parsing-general

• Parsing은 Rendering Engine에서 아주 중요한 절차이기 때문에, 따로 알아둘 필요가 있음
• 문서를 Parsing 한다는 것은 해당 문서를 Parsing code가 사용할 수 있는 구조로 변환한다는 것을 의미
• Parsing의 결과는 대개 문서의 구조를 나타내는 node들로 이루어진 Tree 형태이며, 이는 'Parse Tree' 혹은 'Sytnax Tree'라고 불림

[함께보기] https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/