웹 개발을 위한 기초지식 정리 - 4

1.1.4 Browser의 동작방식

---

브라우저(Browser)

• HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹(WWW)에서 컨텐츠들을 표현하고, 검색하기 위한 소프트웨어
• 브라우저의 동작에 대한 이해를 바탕으로 개발자들은 작성한 소스코드가 효율적으로 실행되기위한 방법을 생각할 수 있다.

Browser components(브라우저 컴포넌트)의 구성

• User Interface(사용자 인터페이스) : 화면에 보이는 모든 부분

• Browser engine(브라우저 엔진) :
  -소스코드를 실행해서 화면에 보여주는 엔진
  -사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

• Rendering engine(렌더링 엔진) :
  -요청받은 콘텐츠를 브라우저에 표시함
  -예시) HTML을 요청받을 시 HTML과 CSS를 파싱하여 화면에 표시함.

• Networking(통신) : HTTP 요청과 같은 네트워크 호출에 사용됨.

• JavaScript Interpreter(자바스크립트 해석기) : 자바스크립트 코드를 해석하고 실행

• UI Backend(UI 백엔드) :
  -콤보 박스와 창 같은 기본적인 장치를 그림
  -플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

• Data storage(자료 저장소) :
  -자료를 저장하는 계층으로 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음
  -HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

렌더링 엔진

• 요청받은 내용을 브라우저에 표시해주는 엔진
• HTML 및 XML문서와 이미지를 표시할 수 있으며 CSS를 함께 파싱하여 해당 위치에 디자인을 해줌

브라우저별 사용 엔진

• Firefox - Gecko
• Safari - WebKit
• Chrome and Opera - Blink

렌더링 엔진의 동작과정

DOM트리 구축을 위한 HTML파싱

• DOM(Document Object Model) :
  -DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식
  -XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스로 Tree자료구조의 형태를 가짐
• 파싱 : 내가 원하는 데이터를 특정 패턴이나 순서로 추출하여 정보를 가공
• HTML파싱 : HTML을 문자단위로 해석하여 내용이 가진 의미들을 파악하는 것

렌더 트리 구축

• 웹 페이지에 표시될 HTML요소들 : DOM(Document Object Model)
• 요소들과 연관된 스타일 정보들 : CSSOM(Cascading Style Sheets Object Model)
• 두가지 모델을 결합(DOM + CSSOM)하여 생성함

렌더트리 배치

• 각 노드가 화면의 정확한 위치에 표시 되는 것

렌더 트리 그리기

• 각 노드를 가로지르며 형상을 만들어 냄

노드(node)

• HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있음
• HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 함

동작과정 예시

1. HTML 코드를 받고 파싱함 -> DOM트리 계층 생성

    -DOM트리는 화면에 지정한 크기 및 색깔 등으로 표현되어야 하기 때문에 CSS파일을 파싱해야함

2. CSS 코드를 받고 파싱함 -> CSSOM트리 계층 생성

3. Attachment : DOM트리와 CSS파싱한 Style규칙을 적용하는 작업을 한 후 렌더트리를 생성함

4. RenderTree : 일반적으로 key와 value로 된 구조로 만듬

5. Layout : 어떻게 배치할지 결정함

6. Painting : 실제로 화면에 그리는 작업

7. Display : Painting까지끝난 작업을 실제로 보여준다.

평소 브라우저 탐색을 할 때 스크롤을 하거나, 어떤 것을 클릭하면서 화면의 위치를 바꿀 때, 브라우저는 어떻게 다시 화면을 그릴까?

위에서 표현된 그림처럼 다시 렌더링 될 것인가?

• Reflow인지, Repaint인지에 따라 다르다

Reflow(다시 렌더링 되는 경우)

• 요청에 의해 콘텐츠의 크기, 위치, 레이아웃 등을 수정하면 그에 영향을 받는 모든 노드들(자식,부모)을 포함하여 Layout과정을 다시 수행
• Reflow 이후 Repaint과정을 수행해야 실제 화면에 반영됨

Repaint(다시 렌더링 되지않는 경우)

• 레이아웃에 영향을 주지않는 스타일 속성(색상 등)이 변했을 경우