브라우저

브라우저 기본 구조

사용자 인테페이스
요청한 페이지를 보여주는 부분의 제외한 나머지 부분
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
랜더링 엔진
요청한 콘텐츠 표시
- HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
통신
HTTP 요청과 같은 네트워크 호출에 사용됨.
- 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
UI 백앤드
콤보 박스와 창 같은 기본적인 장치를 그림
- 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행
자료 저장소
자료를 저장하는 계층으로 쿠키와 같은 모든 종류의 자원을 하드디스크에 저장.
- HTML5에는 브라우저가 지원하는 ‘웹 데이터 베이스’ 가 정의되어 있다.

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

렌더링

렌더링 엔진

요청받은 내용을 브라우저 화면에 표시함. HTML 및 XML 문서와 이미지를 표시할 수 있다.

렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 나타내는 일이다. HTML, CSS JS 등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀 단위로 나타낸다.

렌더링 엔진 동작과정

렌더링 엔진은 요청한 문서의 내용을 얻는 것에서 시작하며, 보통 8KB 단위로 전송된다.

렌더링 엔진은 HTML 문서를 파싱하고 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 규칙은 렌더 트리 라고 부르는 또 다른 트리를 생성한다.

파싱

문서를 통해 파싱트리를 만드는 과정

어휘분석: Tokenizer
문서를 읽어 정해놓은 규칙을 통해 토큰을 추출하는 도구, 과정을 의미한다.
Token: 의미적으로 더이상 나눌 수 없는 기본적인 언어 요소를 표현하는 데이터 단위
구문분석: Lexer
토큰에 약속된 의미를 부여하는 도구, 과정
- 어휘분석과 구문분석의 결과물을 이용하여 파싱트리를 만드는 과정이다.

컴파일

파싱을 통해 만들어진 결과물을 기계 코드로 변환하는 과정이다

DOM - 문서 객체 모델: Document Object Model

HTML, XML 문서의 프로그래밍 인터페이스이다. HTML 문서의 객체 표현

문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
nodes와 property와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

동일한 문서를 표현, 저장, 조작하는 방법을 제공하는 웹 페이지의 객체 지향 표현

따라서, DOM은 마크업과 1:1 관계를 맺는다.

1
2
3
4
5
6
<html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>

CSSOM(CSS Object Model)

위의 그림과 같이 DOM을 생성하는 과정 그대로 CSSOM을 생성한다.

브라우저는 DOM을 생성하는 동안 외부 CSS를 참조하는 <link> 태그를 만나게 되면 브라우저에 리소스를 요청함.
CSS의 원시 바이트가 문자열로 변환 된 후 차례로 토큰과 노드로 변환되고 마지막으로 CSSOM이라는 트리 구조를 만든다.

CSSOM은 하향식으로 규칙을 적용하기 때문에 트리 구조를 가진다. 최종 스타일을 계산할 때 브라우저는 해당 노드에 적용 가능한 가장 일반적인 규칙으로 시작해 더 구체적인 규칙을 적용하는 방식으로 처리된다.

DOM 트리를 바탕으로 CSSOM 트리를 만들기 때문에 해당 하는 스타일룰이 적용이 된 트리 형태로 구성되는 것 같다.

어태치먼트: 랜더링 트리 생성 과정

DOM 트리와 CSSOM 트리를 결합하여, 표시해야 할 순서로 내용을 그려냏 수 있도록 하기 위해 렌더트리를 형성한다. 이 과정을 웹킷에서는 어테치먼트라고 한다.

렌더트리는 화면에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용되고 픽셀을 하면에 그리는 페인트 과정에도 사용됨

랜더 트리 생성 과정

DOM 트리 구축을 위한 HTML 파싱
- HTML 파싱 → DOM 트리 구축
CSSOM 트리 구축을 위한 CSS 파싱
- CSS → CSSOM 트리 생성
DOM 트리와 CSSOM 트리를 활용하여 랜더 트리 구축
- DOM Tree + CSSOM Tree = Rendering Tree

랜더링 트리 생성 과정 2

DOM 트리의 루트에서 시작하여 표시되는 노드 각각을 탐색함
- 스크립트 태그, 메타 태그 등 랜더링된 출력에 반영되지 않는 트리들이 생략됨
- CSS를 속성을 통해 숨겨지는 노드들이 생략됨
  - ex) display: none
표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용
표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보냄

visibility: hidden은 비어 있는 상자로 렌더링되지만 display: none은 랜더링에서 제외됨. 따라서 후자는 스크린 리더기에서 읽을 수 없음, 전자는 일부 스크린 리더기에서 인식하지 않기 때문에 접근성을 위한 IR 처리시 주의해야 한다.

최종 출력은 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함하는 렌더링 트리

레이아웃

렌더 트리가 생성되고, 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산하는 과정.

모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됨. 즉 CSS에 상대적인 값인 %로 할당된 값들은 절대적인 값인 PX 단위로 변환.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>