[브라우저] 브라우저는 어떻게 동작하는가? 1- 파싱과 돔트리 구축

브라우저는 어떻게 동작하는가? 1편 파싱과 돔트리 구축

• 브라우저의 주요기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것.

• 자원은 보통 HTML. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 결정됨.

• 브라우저는 웹 표준화 기구가 정한 HTML과 CSS 명세에 따라 HTML파일을 해석해서 표시한다.

브라우저의 UI요소

• URI 주소 표시 줄
• 이전, 다음 버튼
• 북마크
• 새로고침, 현재문서 로드를 중단하는 정지버튼
• 홈 버튼

브라우저의 기본 구조

• UI : 주소 표시줄, 이전/다음버튼.. 등등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
• 브라우저 엔진 : UI와 렌더링 엔진사이 동작을 control
• 렌더링 엔진 : 요청한 컨텐츠를 표시. 보통 HTML요청에 따른 HTML,CSS를 파싱해 화면에 표시함.
• 통신 : HTTP request같은 네트워크 호출에 사용. 플랫폼 독립적인 interface고 각 플랫폼 하부에서 시행.
• UI 백엔드 : 콤보박스, 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적 interface, OS사용자 interface사용.
• 자바스크립트 해석기 : JS코드를 해석하고 실행.
• 자료 저장소(client-side storage) : 쿠키를 저장하는 것 같이 모든 종류의 자원을 HDD에 저장할 필요가 있다. HTML5명세에는 브라우저가 지원하는 '웹데이터 베이스'가 정의되어 잇음.

크롬은 대부분 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 각 탭은 독립된 프로세스로 처리된다.

렌더링 엔진

• 모질라의 Geoko : 파이어폭스

• Webkit : 사파리, 크롬

  webkit은 리눅스에서 동작하기 위해 제작된 오픈소스 엔진.

  애플이 맥과 윈도우에서 사파리 브라우저를 지원하기 위해 수정함.

동작 과정

• HTML문서 파싱.

• 콘텐츠 트리 내부 태그를 DOM 노드로 변환

• CSS파일과 스타일 요소 파싱.

• 위의 결과로 렌더트리 생성.(색상, 면적 등 시각적 속성이 있는 사각형. 정해진 순서대로 표시)

• 트리 생성 후 각 노드가 화면의 정확한 위치에 표시되도록 배치.

• UI 백엔드에서 렌더트리 각 노드를 지나며 형상을 만드는 과정. ( 모든 HTML을 기다리지 않고 그리기 시작.)

  웹킷

  

게코

파싱과 DOM 트리 구축

파싱

• 파싱은 렌더링 엔진에서 매우 중요한 과장이다.
• 문서 파싱이란 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 구조를 나타내는 노드트리인데 파싱트리(parse tree) 혹은 문법 트리(syntax tree)라고 부른다.

• 파싱은 어휘분석과 구문분석으로 구분된다.
• 어휘분석은 자료를 토큰으로 분해하는 과정. 토큰은 유효한 단위의 집합체로 단어.
• 구분분석은 언어의 구문규칙을 적용하는 과정.
• 이는 각각 어휘 분석기(토큰 변환기) 와 파싱트리를 생성하는 파서로 불림.
• 어휘분석은 공백과 줄바꿈 같은 의미없는 문자를 제거한다.

• 파서는 어휘분석기로부터 새 토큰을 받아 구문 규칙일치여부를 확인하고 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고 파서는 또 다른 토큰을 요청한다.

• 규칙에 맞지 않으면 파서는 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청한다. 맞는 규칙이 없는 경우 예외로 처리하는데 이것은 문서가 유효하지 않고 구문 오류를 포함하고 있다는 의미다.

• 파싱과정은 계속 반복된다.

변환

• 파서 트리는 최종 결과물이 아니다. 파싱은 보통 문서를 다른 양식으로 변환하는데 컴파일이 하나의 예이다.
• 소스 코드를 기계 코드로 만드는 컴파일러는 파싱트리 생성 후 이를 기계 코드 문서로 변환한다.

• 문맥이 정규표현식인 BNF 형식에 따라 정의되는 언어(문맥 자유 문법)라면 정규 파서로 파싱이 가능하다.

ref

• https://d2.naver.com/helloworld/59361