[Boost Web] 3. browser의 동작 / 구조 / 파싱방법 / HTML,CSS 구조 / 렌더링

참고사이트

웹을 통해서 전달되는 데이터는 어딘가에서 해석돼야 합니다.

서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 'Browser'입니다.

Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어 있습니다.

이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 반드시 알아야 하는 것은 아닙니다. 하지만 브라우저의 내부를 이해하면 웹 개발을 하면서 맞닥뜨리는 난해한 문제를 해결할 수 있고, 보다 최적화된 웹개발을 할 수 있습니다.

 

학습 목표

HTML파일이 올 때 브라우저가 어떻게 렌더링과정(Web Browser Rendering)을 거쳐서 화면에 보이게 되는지 간단히 이해

 

브라우저의 동작에 대해 알아야하는 이유

소스를 더 빠르게실행시키기위함

어떻게 동작하는지 알아야 오류 수정가능

 

The browser's high level structure

The browser's main components are (1.1):

1. The user interface: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
2. The browser engine: marshals actions between the UI and the rendering engine.
3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
4. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
5. UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
6. JavaScript interpreter. Used to parse and execute JavaScript code.
7. Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

Figure  : Browser components

 

The main flow

The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.

After that, this is the basic flow of the rendering engine:

Figure  : Rendering engine basic flow

Main flow examples

Figure  : WebKit main flow

일반적인 파싱 방법

파싱은 토큰단위로 잘라서 의미를 해석한뒤 의미 따라 실행해주는 것.

파싱은 전산학에서 컴파일러부분에 해당

2 + 3 - 1을 파싱해야된다면, 이걸 해석해서 값을 얻어야 한다.

이를 위해 2, +, 3, -, 1을 분리한 뒤 이것들이 가진의미를 찾음.

2, +, 3, ... 이것 하나하나를 토큰이라고 하는데 , 토큰을 기준을 syntax tree를 만들고 트리에 따라서 어떤 값의 처리가 일어난다.

HTML 형태

markup이라고도한다.

다음과 같은 모습, DOM트리구조로 구성

CSS 형태

크롬브라우저로 아마존 웹사이트를 뜯어보자!

뜯어보자 웹사이트!

1. 먼저 크롬브라우저가 없다면 설치하기
2. 크롬 브라우저를 열고 크롬 개발자도구 열기
3. 윈도우 (Ctrl + Shift + I)
   맥(Option + Command + i)
4. 접속 : http://www.amazon.com

 

알게 된 몇 가지 특징

• HTML문서는 html이라는 태그로 시작해서 html태그로 끝납니다.
• head는 무엇을 하는 걸까요? html 문서에 대한 정보, 브라우저상에서 보이진 않음
• body는 무엇을 하는 걸까요? div
• HTML은 계층적입니다.
• HTML은 tag를 사용해서 표현합니다. 
• JS와 CSS가 html안에 여러곳에 존재한다.

 

 

JS코드가 head태그에 있으면 body태그의 실행이 늦춰진다.

즉, 브라우저 렌더링을 방해하기에 body태그 닫히기 전 태그에 넣을 것

 

렌더링이란? 화면에 어떻게 보여줄지를 결정하는 것