브라우저의 동작원리

 

   1     브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 

브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 

 

 

   2    브라우저의 기본 구조

 

https://velog.io/@addiescode/How-Browsers-Work

 

1 . 사용자인터페이스 | 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분

2. 브라우저엔진 | 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

3. 렌더링엔진 | 요청한 콘텐츠를 표시

4 . 통신 | HTTP요청과같은 네트워크 호출에 사용

5 . 자바스크립트 해석기 | 자바스크립트 코드를 해석하고 실행

6. UI백엔드 | 콤보박스나 창 같은 기본적인 장치를 그리는 역할로 플랫폼에서 명시하지않은 일반적인 인터페이스

 

 

   3    렌더링 엔진의 기본적인 동작 과정

 

렌더트리는 빠른 사용자 경험을 위해 모든 HTML이 파싱될때까지 기다리지않고
계속 통신을 하면서 전송된 내용에 대한 배치와 그리기 과정을 시작하게 된다.

 

파서 | 파싱을 수행하는 프로그램

파싱 | 코드를 브라우저가 이해하고 사용할 수 있는 구조로 변환

어태치먼트 | 렌더 트리를 생성하기 위해 DOM 노드와 시각 정보를 연결하는 과정 ( 렌더러를 만드는 과정)
렌더러 | 자신과 자식요소를 어떻게 배치하고 그려내야하는지 알고 있다

렌더트리 | CSS파일과 스타일요소를 함께 파싱해 스타일 정보와 HTML표시 규칙을 포함한 트리

배치 | 각각의 노드가 화면 안에서 정확한 위치에 표시되는 것을 의미

그리기 |  UI 백엔드에서 랜더 트리의 각 노드를 가로지르며 형상을 만들어내는것

 

 

+) html 마크업과 dom

dom은 마크업 형태의 html 문서를 object모델의 형태로 바꿔놓은것을 의미한다.
html마크업과 DOM요소는 1:1 매칭이 된다고한다 .
하지만, DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지 않다.

- HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. 

(최초에 화면을 그릴때 사용하는 설계도)

- DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. 

(설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

 

 

---

 

 

✔️ 참고 

d2.naver.com/helloworld/59361

it-ist.tistory.com/110