[Web] 브라우저 렌더링

브라우저 렌더링

파싱

프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문자을 토큰으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 일련의 과정입니다.

(프로그램 런타임 환경에서 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미)

파서

파싱을 하는 프로세서, 구문분석(파싱)을 행하는 프로그램

렌더링 

HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력

URI(Uniform Resource Identifier, 통합 자원 식별자)

인터넷에 있는 자원을 나타내는 유일한 주소로 인터넷에 존재하는 각종 정보들의 유일한 이름이나 위치를 표시하는 식별자이다.

.

URL(Uniform Resource Locator)

식별된 리소스를 사용할 수 있는 위치와 이를 검색하는메커니즘을 지정하며 리소스를 얻을 수 있는 방법입니다.

URN(Uniform ResourceName)

리소스의 위치가 아닌 주소에 특정 정보에 이름을 부여하는 방법입니다.

웹 어플리케이션 구조

WAS (TOMCAT)

아파치 소프트웨어 재단에서 개발한 서블릿 컨테이너 (또는 웹 컨테이너)만 있는 웹 애플리케이션 서버

브라우저 렌더링 과정

1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일등 렌더링에 필요한 리소스를 요청하고 성버로 응답을 받음

2. 브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstarct Syntax Tree)를 생성하고 바이트 코드로 변환하여 실행하고 이때 자바스크립트 소스는 DOM API를 통해 DOM이나 CSSOM을 변경하고 변경된 내용을 다시 렌더 트리로 결합

4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산하고 브라우저 화면에 HTML 요소를 페인팅

※ DOM생성과정 : 바이트 → 문자 → 토큰 → 노드 → DOM 생성

 

DOM tree

 

- 문서노드: 트리의 최상에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서노드를 통해야 함. (DOM tree에 접근하기 위한 시작점)

- 요소노드: HTML 요소, 요소는 중첩에 의해 부자관계를 가지며 이 이 부자관계를 통해 정보를 구조화(문서 구조 서술), 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성됨.

- 어트리뷰트 노드: 요소노드를 통해 접근한 요소의 속성을 참조, 수정할 수 있음.

- 텍스트 노드: HTML요소의 텍스트 표현, 자식노드를 가질 수 없음. (DOM tree의 최종단)