Browsers and how they work? 정리

대표적인 브라우저

Browsers 이란?

브라우저는 웹 페이지, 이미지, 비디오 및 기타 파일을 포함하여 월드 와이드 웹에서 컨텐츠를 찾고 검색하고 표시하는 데 사용되는 소프트웨어 응용 프로그램입니다. 

클라이언트 / 서버 모델로서 브라우저는 웹 서버에 접속하여 정보를 요청하는 컴퓨터에서 실행되는 클라이언트입니다. 웹 서버는 정보를 웹 브라우저로 다시 전송하여 결과를 컴퓨터 또는 브라우저를 지원하는 다른 인터넷 가능 장치에 표시합니다.

 

현재(2017기준) 브라우저는 HTML 웹 페이지, 응용 프로그램, JavaScript, AJAX 및 웹 서버에서 호스팅되는 기타 컨텐츠를 해석하고 표시 할 수있는 모든 기능을 갖춘 소프트웨어입니다.

 

브라우저의 구성 요소

1. 사용자 인터페이스

사용자 인터페이스는 사용자가 브라우저와 상호 작용하는 공간입니다. 주소 표시 줄, 뒤로 및 다음 단추, 홈 단추, 새로 고침 및 중지, 책갈피 옵션 등이 포함됩니다. 요청된 웹 페이지가 표시되는 창을 제외한  모든 부분입니다.

2. 브라우저 엔진

브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 간의 연결 역할을합니다. 다양한 사용자 인터페이스의 입력에 따라 렌더링 엔진을 queries(query는 데이터나 정보를 요청하는 것)하고 조작합니다.

3. Rendering(렌더링) 엔진

렌더링 엔진은 이름에서 알 수 있듯이 요청 된 웹 페이지를 브라우저 화면에 렌더링합니다. 렌더링 엔진은 CSS를 사용하여 형식화 된 HTML, XML 문서 및 이미지를 해석하고 사용자 인터페이스에 표시되는 레이아웃을 생성합니다. 그러나 플러그인 또는 확장을 사용하면 다른 유형의 데이터도 표시 할 수 있습니다.

4. 네트워킹

HTTP 또는 FTP의 일반적인 인터넷 프로토콜을 사용하여 URL을 검색하는 브라우저의 구성 요소입니다. 네트워킹 구성 요소는 인터넷 통신 및 보안의 모든 측면을 처리합니다. 네트워크 구성 요소는 네트워크 트래픽을 감소시키기 위해 검색된 문서의 캐시를 구현할 수있다.

5. 자바 스크립트 해석기

웹 사이트에 내장 된 자바 스크립트 코드를 해석하고 실행하는 브라우저의 구성 요소입니다. 해석 된 결과는 렌더링 엔진으로 전송되어 표시됩니다. 스크립트가 외부 스크립트 인 경우 먼저 네트워크에서 리소스를 가져옵니다. 파서는 스크립트가 실행될 때까지 유지됩니다.

6. UI 백엔드

UI 백엔드는 콤보 상자 및 창과 같은 기본 위젯을 그리는 데 사용됩니다. 이 백엔드는 플랫폼 고유가 아닌 일반 인터페이스를 제공합니다. 그 아래에는 운영 체제 사용자 인터페이스 방법이 사용됩니다.

7. 데이터 지속성 / 스토리지

지속성 계층입니다. 브라우저는 localStorage, IndexedDB, WebSQL 및 FileSystem과 같은 스토리지 메커니즘을 지원합니다. 브라우저가 설치된 컴퓨터의 로컬 드라이브에 작성된 작은 데이터베이스입니다. 캐시, 쿠키, 책갈피 및 환경 설정과 같은 사용자 데이터를 관리합니다.

 

Rendering 엔진

렌더링 엔진의 순서

렌더링 엔진은 HTML 문서의 청크를 구문 분석하고 요소를“content tree ”또는“ DOM tree ” 트리에서 DOM 노드로 변환합니다 . 또한 외부 CSS 파일과 스타일 요소를 모두 구문 분석합니다.

 

DOM 트리가 생성되는 동안 브라우저는 다른 트리 인 렌더 트리를 생성 합니다. 이 트리는 표시되는 순서대로 시각적 요소로 구성됩니다. 문서의 시각적 표현입니다. 이 트리의 목적은 내용을 올바른 순서로 칠할 수 있도록하는 것입니다. Firefox는 렌더 트리의 요소를 "프레임"이라고합니다. WebKit은 렌더러 또는 렌더 객체라는 용어를 사용합니다.

 

렌더 트리를 생성 한 후에는 렌더 트리의 " 레이아웃 프로세스 "를 거 칩니다 . 렌더러가 작성되어 트리에 추가되면 위치와 크기가 없습니다. 이러한 값을 계산하는 프로세스를 레이아웃 또는 리플 로우라고합니다. 이는 각 노드에 화면에 표시 될 정확한 좌표를 제공한다는 의미입니다. 루트 렌더러의 위치는 0,0이며 그 크기는 브라우저 창의 보이는 부분 인 뷰포트입니다. 모든 렌더러에는 "layout"또는 "reflow"메서드가 있으며 각 렌더러는 레이아웃이 필요한 자식의 레이아웃 메서드를 호출합니다.

 

페인팅 단계에서는 렌더 트리가 통과되고 렌더러의 "paint ()"메서드가 호출되어 내용을 화면에 표시합니다. 페인팅은 UI 백엔드 레이어를 사용합니다.