반응형
브라우저의 주요 기능
브라우저의 주요 기능은 사용자가 참조하고자하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시하는 것이다.
가장 대표적인 브라우저에는 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등이 있다.
브라우저의 기본 구조
- 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 렌더링 엔진 : 요청 받은 내용을 브라우저 화면에 표시. ex) HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
- 통신 : HTTP
- UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림
- 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
- 자료 저장소 : 자료를 저장하는 계층.
렌더링 엔진
사용자가 요청한 내용을 서버로부터 받아 브라우저 화면에 표시한다.
- 표시 할 수 있는 것 : HTML 및 XML 문서와 이미지, PDF(플러그인이나 브라우저 확장 기능 이용)
- 종류 : 파이어폭스 - 개코(Gecko) 엔진 / 사파리, 크롬 - 웹킷(Webkit) 엔진
- 동작 과정 : DOM 트리 구축을 위한 HTML 파싱 > 렌더 트리 구축 > 렌더 트리 배치 > 렌더 트리 그리기
＊파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환 하는 것
렌더링 엔진의 동작 과정
1. DOM 트리 구축을 위한 HTML 파싱
렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서를 파싱하여 각 요소들을 DOM Tree(Contents Tree)의 각 DOM 노드 들로 전환한다.
＊DOM : Dcument object model 의 준말로 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔 놓은 것
<html>
<body>
<p>
Hello World
</p>
<div>안뇽</div>
</body>
</html>→ 이러한 HTML 문서를 DOM Tree로 전환하면 아래와 같이 구성된다.
2. 렌더 트리 구축
HTML 문서들을 파싱해 DOM Tree를 구축한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱해 스타일 데이터들로 렌더 트리를 만든다.
DOM Tree가 웹 상에 나타날 내용을 구성한다면 렌더 트리는 시각적 요소, 어떻게 나타날지 그 스타일을 지정한다.
3. 렌더 트리 배치
각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값을 부여한다.
4. 렌더 트리 그리기
렌터 트리의 배치가 완료 되었다면, UI 백엔드가 동작해 각 노드들을 정해진 스타일 및 위치 값대로 화면에 배치한다.
Reference
반응형
