browser

browser 구성

1. 사용자 인터페이스 : 주소 표시줄, 뒤로/앞으로 가기 버튼, 북마크 메뉴 등이 포함됩니다. 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분이 표시됩니다.
2. 브라우저 엔진 : UI와 렌더링 엔진 간의 작업을 마샬링합니다.
3. 렌더링 엔진 - webkit, 크로미움 : 요청된 콘텐츠 표시를 담당합니다. 예를 들어 요청된 콘텐츠가 HTML인 경우 렌더링 엔진은 HTML 및 CSS를 구문 분석하고 구문 분석된 콘텐츠를 화면에 표시합니다.
4. 네트워킹 : HTTP 요청과 같은 네트워크 호출의 경우 플랫폼 독립적인 인터페이스 뒤에서 다른 플랫폼에 대해 다른 구현을 사용합니다.
5. UI 백엔드 : 콤보 상자 및 창과 같은 기본 위젯을 그리는 데 사용됩니다. 이 백엔드는 플랫폼에 고유하지 않은 일반 인터페이스를 노출합니다. 그 아래에서 운영 체제 사용자 인터페이스 방법을 사용합니다.
6. 자바스크립트 인터프리터:  JavaScript 코드를 구문 분석하고 실행하는 데 사용됩니다.
7. 데이터 저장 : 이것은 지속성 레이어입니다. 브라우저는 쿠키와 같은 모든 종류의 데이터를 로컬에 저장해야 할 수도 있습니다. 브라우저는 또한 localStorage, IndexedDB, WebSQL 및 FileSystem과 같은 저장소 메커니즘을 지원합니다.

HTML을 해석해서 DOM Tree를 만들고, CSS를 해석해서 역시 CSS Tree(CSS Object Model)을 만듭니다.

이 과정에서 Parsing 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이라고 보시면 됩니다.

DOM Tree와 CSS Tree, 이 두 개는 연관되어 있으므로 Render Tree로 다시 조합됩니다.

이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있습니다.

이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 Painting과정을 거치게 됩니다.

 

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

A : 처음 브라우저를 로딩할 때 생성된 렌더링 트리를 메모리에 캐싱한다. 스크롤 등의 작업을 통해 화면의 위치가 바뀌작은변화가 일어난다면 repainting의 과정만 거쳐 시스템 자원을 아낄 수 있다.

 

참고

https://changicho.tistory.com/11

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

 

 

---

크롬 브라우저(chrome browser)

1. 크로미움

크로미움이라는 브라우저의 이름이자, 크롬과 엣지, 네이버 웨일 등의 브라우저에서 활용하는 오픈소스 프로젝트의 이름이다. 이는 구글에서 2008년 크롬을 출시하면서 프로젝트가 시작되어, 구글 직원 뿐만 아니라 모든 사람이 이 프로젝트에 참여 했다.

2. 크로미움 vs chrome

크로미움이란 크롬과 엣지의 교집합이다. 구글에서는 크롬이라는 브라우저를 완성하기 위해 크로미움에 다른 컴포넌트와 기능을 결합 했으며, 이를 다르게 얘기하면 크롬이나 엣지에서 제공하는 기능이 크로미움에 있는 것은 아니다.

다른 차이점은 구글이 제공하는 다양한 부가 서비스나 DRM 컴포넌트 등의 기술에 대한 내장 여부이다. 특히 DRM 컴포넌트는 크롬이나 엣지에서 저작물에 대한 저작권이 있는 컨텐츠를 표시하는 역할을 하기에 중요하다.

또한 안정성 부분에서 크로미움은 불완전하다. 크로미움은 오픈소스이다보니 완성도가 높지 않고 불안정하다. 실제로 크로미움의 브라우저는 많은 오류를 아직 담고 있다. 크롬과 엣지는 개발과정에서 유지하는 4개의 빌드 가운데 불완전한 '카나리' 빌드조차 크로미움과 비교하면 훨씬 안정적이다.

그러나 여러 사람이 크롬이나 엣지 대신 크로미움을 선택하는 경우도 있다. 이는 크롬이나 엣지보다 크로미움이 구글로 더 적은 정보를 수집해 전송한다. 구글과 엣지는 충돌 보고서와 이용 통계를 구글이나 마이크로소프트에 전송할 수 있지만, 크로미움은 그렇지 않다.

물론 크롬에서도 기본적으로는 데이터 수집 옵션은 비활성화되어 있지만, 브라우저 설정 패널에서 활성화시킬 수 있다. 엣지의 경우는 브라우저 자체에도 데이터 수집 관련 설정이 있지만, 엣지가 가장 많이 사용되는 윈도우 10은 대부분 마이크로소프트에 진단 데이터를 전송하게 되어 있다. 맥OS는 크롬과 마찬가지로 데이터 수집이 비활성화되어 있는 것이 기본이지만, 환경설정에서 활성화할 수 있다.

한편, 크로미움은 데이터 수집 및 보고 기능이 완전히 결여되어 있다.

3. 크로미움 설치

크로미움을 다운로드하는 가장 편한 장소는 이 다운로드 사이트다.

사이트에는 현재 빌드 번호와 업데이트 시점이 표시된다. 크로미움이 자주 변경되기 때문에 업데이트 시점은 분 단위로 표시된다.

크로미움 다운로드에 관한 자세한 정보는 프로젝트 웹사이트를 참조하면 된다. 예를 들어, 테스트와 디버그에 사용하기 위해 특정 브라우저 버전을 찾고 다운로드하는 방법 등이 설명되어 있다.

동일 시스템에서 크로미움과 크롬(또는 엣지)를 실행할 수 있는가?

크로미움은 크롬이나 엣지와 동일 시간에 동일 시스템에서 실행할 수 있다. 크로미움을 기기에 추가하기 위해서 크롬을 제거할 필요는 없다.

이는 한 윈도우에서 크롬과 엣지의 각종 ‘채널’이 동작하는 방식과 동일하다. 예를 들어, 윈도우용 크롬 카나리 빌드를 실행하면서 스테이블(stable) 버전을 따로 실행할 수 있다. 이는 엣지도 마찬가지다.

크로미움에 보안 문제가 있는가?

구글과 마이크로소프트의 자체 엔지니어가 발견한 취약점과 독립적인 보안 연구자들이 발굴한 취약점은 크로미움에서 정기적으로 패치된다. 따라서 이는 크롬이나 엣지 만큼이나 안전하다.

미시적 수준에서 크로미움은 엔지니어가 보안 수정을 추가하는 시점이 불분명하다. 크롬의 스테이블 빌드는 2~3주마다 패치가 나오며, 엣지는 보통 크롬 패치 배포 후 2일 후에 나온다. 따라서 크로미움 브라우저도 최소한 그 정도의 빈도로 업데이트가 될 것이다. 하지만 버그 수정은 카나리 같은 불안정한 빌드에 먼저 적용되고 스테이블 빌드로 넘어오기 때문에 크로미움 프로젝트가 관리하는 소스코드와 크로미움 브라우저는 카나리 빌드로 적용되기 전에 변경될 것으로 보는 게 타당하다.

그러나 크로미움은 업데이트 메커니즘이 없기 때문에 소스코드에 적용되는 어떤 보안 패치도 사용자가 최신 버전을 수동으로 다운로드하지 않으면, 사용자의 크로미움에 반영되지 않는다.

분명한 사실 하나는 범죄자들이 크로미움에 악성코드를 심거나 공격코드를 포함한 크로미움 브라우저 업데이트 버전을 유포한다는 것이다. 그래서 크로미움 보안에 관한 의문이 꾸준히 제기된다.

 

 

참고

https://www.itworld.co.kr/t/54652/브라우저/171849?page=0,1