브라우저란?
html, css 명세에 따라 html 파일을 해석해서 표시함
브라우저의 자원의 주소는 URI에 의해 정해짐
URI는 식별하고, URL은 위치를 가르킨다
URI란?
- 특정 리소스를 식별하는 통합 자원 식별자
- 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스
URI 구조
scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]
1. scheme : 사용할 프로토콜을 뜻하며 웹에서는 http 또는 https를 사용
2. user와 password : (서버에 있는) 데이터에 접근하기 위한 사용자의 이름과 비밀번호
3. host와 port : 접근할 대상(서버)의 호스트명과 포트번호
4. path : 접근할 대상(서버)의 경로에 대한 상세 정보
5. query : 접근할 대상에 전달하는 추가적인 정보 (파라미터)
6. fragment : 메인 리소스 내에 존재하는 서브 리소스에 접근할 때 이를 식별하기 위한 정보
URL이란?
- 흔히 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약.
- URI의 서브셋
URL 구조
http://www.domain.com:1234/path/to/resource?a=b&x=y
http : 프로토콜
www.domain.com : 호스트
1234 : 포트
path/to/resource : 리소스경로
a=b&x=y : 쿼리
브라우저 기본 구조
사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들 (요청한 페이지를 보여주는 창을 제외한 나머지 부분)
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
렌더링 엔진
요청한 콘텐츠 표시 (html 요청이 들어오면? → html, css 파싱해서 화면에 표시)
통신
http 요청과 같은 네트워크 호출에 사용 (플랫폼의 독립적인 인터페이스로 구성되어있음)
UI 백엔드
플랫폼에서 명시하지 않은 일반적 인터페이스. 콤보 박스 창같은 기본적 장치를 그림
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행
자료 저장소
쿠키 등 모든 종류의 자원을 하드 디스크에 저장하는 계층
렌더링 ?
- 요청받은 내용을 브라우저 화면에 표시해줌
- 기본적으로 html, xml 문서, 이미지 표시 가능
- 크롬과 사파리는 웹킷 엔진 사용 / 파이어폭스는 게코 엔진 사용
렌더링 동작 과정
1. DOM 트리 구축을 위한 HTML 문서 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기
렌더 트리란 ?
DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별되어 생성. 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리됨.
즉, 렌더 트리 : 화면에 보이는 모든 노드와 콘텐츠, 스타일 정보를 병합한 최종 출력
DOM(Document Object Model - 문서 객체 모델)
웹페이지 소스를 까보면 <html>, <body>와 같은 태그들이 존재한다. 이를 Javascript가 활용할 수 있는 객체로 만들면 문서 객체가 된다.
모델은 말 그대로, 모듈화로 만들었다거나 객체를 인식한다라고 해석하면 된다.
즉, DOM은 웹 브라우저가 html 페이지를 인식하는 방식을 말한다. (트리구조)
파싱
문서 파싱은, 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
- 보통 이런 파서를 생성하는 것은 문법에 대한 규칙 부여 등 복잡하고 최적화하기 힘드므로, 자동으로 생성해주는 파서 생성기를 많이 활용
- 웹킷은 플렉스(flex)나 바이슨(bison)을 이용하여 유용하게 파싱이 가능
참고자료1
+인터넷 서치
