브라우저의 동작 원리(1) - 브라우저의 주요 기능

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시

자원: 주로 HTML. PDF 이미지 등도 가능 (자원 주소는 Uniform Resource Identifier에 의해 정해짐)

사용자 인터페이스:

• URI 입력가능한 주소 표시줄
• 이전버튼, 다음버튼
• 북마크
• 새로고침버튼, 정지버튼
• 홈버튼

 

브라우저의 기본 구조

1. 사용자 인터페이스 - 앞서 언급한 주소표시줄, 버튼 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
3. 렌더링 엔진 - 요청한 콘텐츠 표시.
4. 통신 - 네트워크호출에 사용됨. 플랫폼 독립적 인터페이스. 각 플랫폼 하부에서 실행됨
5. UI 백엔드 - 플랫폼에서 명시하지 않은 일반적인 인터페이스. OS 사용자 인터페이스 체계를 사용
6. 자바스크립트 해석기 - 자바스크립트 코드 해석,실행
7. 자료저장소 - 자료 저장하는 계층.

 

 

렌더링 엔진

요청 받은 내용을 브라우저 화면에 표시하는 역할

HTML, XML 문서와 이미지 등

 

렌더링 엔진들

파이어폭스 - 게코(모질라 직접 제작) 엔진

사파리, 크롬 - 웹킷 엔진

동작 과정

 

통신으로부터 요청한 문서의 내용을 얻기(주로 8KB단위로 전송)

1. HTML문서 파싱, "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환
2. 외부 CSS파일과 함께 포함된 스타일요소도 파싱. 스타일정보와 HTML표시 규칙은 "렌더 트리"라는 또다른 트리 생성.
3. 렌더트리: 색상/면적과 같은 시각적 속성이 있는 사각형을 포함. 정해진 순서대로 화면에 표시된다.
4. 렌더 트리 생성이 끝나면 배치시작. 각 노드가 화면의 정확한 위치에 표시되는 것.
5. UI백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어내는 그리기 과정

=> 이 과정들이 점진적으로 진행된다. 좀더 나은 사용자 경험을 위해 빠르게 내용 표시. 이를 위해 모든 파싱이 끝나기 전부터 배치와 그리기 과정 시작

 

동작 과정 예

• 웹킷

• 게코

 

• 시각적으로 처리되는 렌더 트리를 "형상 트리(frame tree)"라고 부름
• 각 요소: 형상(frame)이라고 부름

 

파싱과 DOM 트리 구축

파싱 일반

렌더링 엔진에서 매우 중요!! 

문서 파싱: 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것.

파싱결과는 보통 문서 구조를 나타내는 노드 트리. 파싱 트리 또는 문법 트리라고 부른다.

 

문법

문법파싱은 문서에 작성된 언어 or 형식의 규칙을 다름.

파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 함 - Context Free Langauge

 

파서-어휘 분석기 조합

파싱은 어휘 분석과 구문 분석으로 구분할 수 있다.

어휘 분석: 자료 -> 토큰(유효하게 구성된 단위의 집합체. aka 용어집) == aka 토큰 번환기

구문 분석: 언어의 구문 규칙 적용 => 파싱 트리 생성. 의미 없는 문장 제거

 

파싱 과정 반복 - 어휘 분석기에서 새 토큰 받아서 구문 규칙과 일치하는지 확인.

규칙에 맞으면: 토큰에 해당하는 노드가 파싱 트리에 추가됨. 하서는 또다른 토큰 요청

규칙에 맞지 않으면: 파서는 토큰을 내부적으로 저장. 토큰과 일치하는 규칙이 발견될 때까지 요청. 맞는 규칙 없으면 예외처리

 

변환: 예시) 컴파일러 - 소스코드 -> 기계코드

파싱 트리 생성 -> 기계 코드 문서로 변환

 

어휘와 구문에 대한 공식적인 정의

어휘: 보통 정규표현식으로 표현 http://www.regular-expressions.info/

구문: BNF(Backus–Naur form)라고 부르는 형식에 따라 정의(BNF -> Context Free Grammar로 표현가능)

문법이 Context Free Grammar면 정규 파서로 파싱 가능

 

파서의 종류

하향식 파서: 표현식에 해당하는 규칙 점진적으로 찾아냄(높은 수준의 규칙부터)

상향식 파서: 입력 값이 규칙에 맞을 때까지 찾아서 맞는 입력 값을 규칙으로 바꿈. 입력값의 끝까지 진행. 부분적으로 일치하는 표현식은 파서 스택에 쌓임 == aka 이동-감소 파서

 

파서 자동 생성

파서 생성기: 언어에 어휘, 구문 규칙 같은 무넙 부여하면 동작하는 파서 만들어줆

웹킷 - FLEX(어휘 생성 - 토큰의 정규 표현식 정의 포함하는 파일 입력받음), Bison(파서 생성 - 언어 구문 규칙 입력받음)

REX, Yacc

 

 

 

 

출처:https://d2.naver.com/helloworld/59361 (이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한 "How Browsers Work: Behind the scenes of modern web browsers"의 번역본)