웹 브라우저 종류 및 작동 원리

브라우저별 아이콘

브라우저 종류
1. 크롬(Chrome)
- 구글에서 개발한 웹 브라우저
2. 사파리(safari)
- 애플이 개발한 웹 브라우저
3. 인터넷 익스플로러
- 인터넷엔 도로명 주소 만든 새X와 액티스액스 만든 새X 욕이 넘쳐난다.
4. 파이어폭스(Firefox)
- 개발자들이 띄운 
5. 오페라(Opera)
- 최근 VPN 기능으로 한국에서 급부상함. HTTPS 규제에 대한 가장 쉬운 우회방법이다.
6. 웨일
- 네이버에서 개발한 브라우저
7. 비발디(Vivaldi)
8. 토치(torchbrowser)
9. 미도리(Midori)
10. 아반트 브라우저(Avant Browser)

브라우저 기본구조
1. 사용자 인터페이스 : 주소표시줄, 다음/이전버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분이다.
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링엔진 사이의 동작을 제어한다.
3. 렌더링 엔진 - 요청한 콘텐츠를 표시한다. HTML이나 PDF를 화면에 표시한다.
렌더링 역할을 하는 엔진이 브라우저마다 다르기때문에 똑같은 페이지를 요청하더라도 다르게 보이는 경우가 있다.
4. 통신 - HTTP 요청과 같은 네트워크 통신
5. UI백엔드 - OS 사용자 인터페이스 체계를 사용한다.
6. JAVASCRIPT 해석기 - 해석하고 실행한다.
7. 자료저장소 - 쿠키나 로컬스토리지같이 자원을 로컬 하드 디스크에 저장한다.

렌더링(Rendering)이란?
이미지 합성이라고도 한다. 쉽게말해 사용자가 요청한 데이터를 화면에 표시하는 것을 말한다.

랜더링 엔진 종류
게코(Gecko) : 파이어폭스
블링크(Blink) : 크롬, 오페라, 웨일
- 크롬은 웹킷을 사용하다가 블링크 엔진을 자체적으로 개발해서 사용하고 있다.
웹킷(Webkit) : 사파리

랜더링 동작 과정
W3C(World Wide Web Consortium)에서 정의한 HTML과 CSS 표준 명세에 따라 파일을 해석하고 브라우저에 표시한다.
1. 렌더링 엔진이 HTML 파싱하고, 내부에서 DOM 노드로 변환한다.
 - 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환한다.
2. Render Tree를 생성한다.
3. 각 노드가 화면의 정확한 위치에 표시된다.
4. UI백엔드에서 스타일정보를 찾아서 화면에 그리는 과정이다.

javascript 엔진
렌더링 엔진과 javascript 엔진은 다른것이다. 
javascript 엔진은 javascript로 작성한 코드를 해석하고 실행하는 인터프리터이다.
주로 웹 브라우저에서 사용된다.
여기서 말하는 인터프리터는 고급언어로 작성된 원시 프로그램을 목적프로그램으로 번역하는 번역 프로그램이고 (고급언어를 기계어로 번역), 
프로그램 번역방식에 따라 구분된다. 
컴파일러는 한번에 번역하는데 비해 인터프리터는 번역 속도는 빠르지만 프로그램 실행시 매번 실행해야 하므로 실행 속도는 느리다.