오늘은 이론적인 내용에 대해 공부했다. 공부한 내용을 정리하고 싶지만 너무 방대한 양이기 때문에 공부한 사이트에 대해 정리를 해 놓을 것이다.
https://d2.naver.com/helloworld/59361
이 사이트는 Browser가 어떤 역할을 하는지 상세히 적어 놓았다.
브라우저
HTML과 CSS명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web ConSortium)에서 정한다. 과게에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방벙으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.
[출처 : https://d2.naver.com/helloworld/59361]
브라우저의 기본 구조
- 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
- 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
- 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
- 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
- UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
- 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.
- 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.
렌더링 엔진
사파리, 크롬 => 웹킷(Webkit)엔진
파이어폭스 => 게코(Gecko)엔진
동작 과정
웹킷 동작 과정
모질라의 게코 렌더링 엔진 동작 과정
파싱과 DOM 트리
파서와 어휘 분석기 조합
문서 소스로부터 파싱 트리를 만드는 과정
파싱은 어휘 분석과 구문 분석이라는 두 가지로 구분할 수 있다.
어휘 분석은 자료를 토큰으로 분해하는 과정이다. 토큰은 유효하게 구성된 단위의 집합체로 용어집이라고도 할 수 있는데 인간의 언어로 말하자면 사전에 등장하는 모든 단어에 해당된다.
구문 분석은 언어의 구문 규칙을 적용하는 과정이다.
컴파일 과정
HTML 파서
HTML 문법 정의
HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다. 현재 버전은 HTML4와 초안 상태로 진행 중인 HTML5 이다.
HTML은 파싱하기 어렵고 전통적인 구문 분석이 불가능하기 때문에 문맥 자유 문법이 아니라는 것이다. XML 파서로도 파싱하기 쉽지 않다.
이외 에도 브라우저가 어떻게 작동되는 지에 대한 내용은 너무 많기 때문에 위 네이버 사이트를 참고해야겠다. 중요한 문제들이 너무 많아 정리가 어렵다....
