최근 사용자들이 이용하는 브라우저에는 인터넷 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 이렇게 있다.
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 표시하는 것이다(HTTP).
브라우저에 표시되는 자원은 보통 HTML문서지만 PDF나 이미지 또는 다른 형태일 수도 있다. 자원의 주소는 URI(Uniform Resource Identifier).
현재 브라우저들은 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML과 CSS를 해석해 표시한다. 이전에는 각 브라우저 별로 다른 명세에 따라 구현했으나 현재는 표준 명세에 따르고 있다.
<브라우저 기본 구조>
1. 사용자 인터페이스 (주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로고침 버튼과 로드를 중단하는 정지 버튼, 홈 버튼)
2. 브라우저 엔진 (사용자 인터페이스와 렌더린 엔진 사이의 동작 제어)
3. 렌더링 엔진 : 요청한 콘텐츠를 브라우저 화면에 표시. (HTML 요청 시 HTML, CSS 파싱해 화면에 표시) 파이어폭스는 모질라에서 만든 게코(Gecko) 엔진, 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다. 크롬은 다른 브라우저들과 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 또 나은 사용자 경험을 위해 HTML 파싱을 기다리지 않고 받은 내용의 일부를 먼저 화면에 표시한다.
4. 통신 (HTTP 요청과 같은 네트워크 호출에 사용됨. 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행.
5. UI 백엔드 (콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용)
6. 자바스크립트 해석기
7. 자료 저장소 (자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종료의 자원을 하드 디스크에 저장. HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있다)
<웹 브라우저 렌더링 과정 Critical Rendering Path, CRP -CRP과정>
1. (HTML의 역할) DOM 트리 구축 위한 HTML 파싱 >>> 2. (CSS의 역할)렌더 트리 구축 >>> 3. (DOM+CSSOM)렌더 트리 배치, 스타일 계산 >>> 4. (Layout 또는 Reflow) 레이아웃 실행, Layer Tree 업데이트 >>> 5. (Paint/Composite)렌더 트리 그리기
1. (HTML의 역할) DOM 트리 구축 위한 HTML 파싱
** 파싱 이해하기 - 파싱은 어휘 분석/구문 분석으로 구분. 어휘 분석은 자료를 토큰으로 분해하는 과정. 토큰은 유효하게 구성된 단위의 집합체로, 인간의 언어로 예를 들면 사전에 등장하는 모든 단어에 해당한다. 구문 분석은 언어의 구문 규칙을 적용하는 과정.
** DOM Tree 생성 과정
1. 변환 : 브라우저가 원시바이트(Bytes)를 디스크나 네트워크에서 읽어와 해당 파일에 지정된 인코딩(ex. UTF-8)에 따라 개별 문자로 변환한다.
2. 토큰화 : 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰(<html>, <body> 같은 형태의 문자)으로 변환한다. 토큰은 특별한 의미와 고유의 규칙을 갖는다.
3. 렉싱(Tokens > Nodes) : 방출된 토큰은 속성 및 규칙을 정의하는 객체로 변환한다.
4. DOM 생성 : HTML 마크업이 여러 태그간의 관계를 정의하면서 트리 구조를 형성한다.
2. (CSS의 역할)렌더 트리 구축
DOM트리 생성 과정과 동일하며, DOM 트리가 구축되는 동안 CSS에 의해 렌더 트리를 구축한다. 올바른 순서대로 문서의 구성요소를 그려낼 수 있도록 한다. (시각적 속성을 다룬다)
DOM 요소에 부합하나 1:1로 대응하지는 않는다 (ex. head와 같은 비시각적 요소, select요소 따위의 복잡성, position-float같은 다른 위치의 요소들)
3. (DOM+CSSOM)렌더 트리 배치, 스타일 계산
컨텐츠의 DOM, 스타일의 CSSOM이 만나 객체를 화면에 픽셀로 찍어내는 과정이 필요하다. 이들이 합쳐져 Render Tree가 만들어진다. 필요에 따라 1개 이상의 Layer가 만들어진다.
4. (Layout 또는 Reflow) 레이아웃 실행, Layer Tree 업데이트
앞에서 노드와 노드의 스타일만 입혀졌다면, Layout에서는 화면에 그려질 노드의 정확한 위치와 크기를 계산한다. 이로써 노드는 자신의 정확한 위치를 알 수 있다.
5. (Paint/Composite)렌더 트리 그리기
Layout에서 노드의 화면 구상이 다 이뤄지면, Paint 이벤트를 통해 노드들은 화면에 픽셀로 변환한다. 텍스트, 색, 이미지 등 모든 시각적인 요소들이 입혀진다. 이를 Painting 또는 Rasterizing 이라고 하며, Layer가 여러개인 경우 이를 합성해 하나의 bitmap을 만드는 작업은 compositing이라고 한다.
<HTML 파싱 방식> : 브라우저는 웬만한 오류를 수정하고 너그럽게 파싱하는 경향이 있다. 문맥 자유 문법이 아닌 DTD(문서 형식 정의) 방식으로 파싱한다.
'파싱 트리'는 DOM 요소와 속성 노드의 트리로서 출력 트리가 된다. DOM은 문서 객체 모델(Document Object Model)의 준말로, 이것은 HTML 문서의 객체 표현이고 자바스크립트와의 연결 지점이다. 트리의 최상위 객체는 문서 document다.
** HTML 파싱 알고리즘 : HTML은 일반적으로 하향식 또는 상향식 파서로 파싱이 안되는데 그 이유는,
- 언어의 너그러운 속성.
- 잘 알려져 있는 HTML 오류에 대한 브라우저의 관용.
- 변경에 의한 재파싱. 일반적으로 소스는 파싱하는 동안 변하지 않지만 HTML에서 document.write을 포함하고 있는 스크립트 태그는 토큰을 추가할 수 있기 때문에 실제로는 입력 과정에서 파싱이 수정되기 때문.
오류를 처리하는 방식은 아래와 같다. 오류는 내부적으로 처리하며 사용자에게 표시하지 않는다.
- 어떤 태그의 안쪽에 추가하려는 태그가 금지된 것일 때 일단 허용된 태그를 먼저 닫고 금지된 태그는 외부에 추가한다.
- 파서가 직접 요소를 추가해서는 안된다. 문서 제작자에 의해 뒤늦게 요소가 추가될 수 있고 생략 가능한 경우도 있다. HTML, HEAD, BODY, TBODY, TR, TD, LI 태그가 이런 경우에 해당한다.
- 인라인 요소 안쪽에 블록 요소가 있는 경우 부모 블록 요소를 만날 때까지 모든 인라인 태그를 닫는다.
- 이런 방법이 도움이 되지 않으면 태그를 추가하거나 무시할 수 있는 상태가 될 때까지 요소를 닫는다.
- HTML의 배치는 왼쪽에서 오른쪽, 위에서 아래로 흐른다. 단, 표는 크기와 위치를 계산하기 위해 하나 이상의 경로를 필요로 하기 때문에 예외.
- CSS 파싱 : 문맥 자유 문법으로 파싱하며 CSS 명세는 CSS 어휘와 문법을 정의한다. (웹킷과 파이어폭스의 경우) CSS파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다. CSS 규칙은 선택자 객체(ex. p, div, .error 등의 토클)와 선언 객체 (margin, 2px, color, red 등)를 나타낸다.
- 스크립트 : 웹은 동기화(synchronous, 파싱과 실행이 동시에 수행) 모델이다. <script> 태그를 만나 스크립트가 실행되면 문서의 파싱은 중단된다. HTML5는 비동기 처리하는 속성이 추가되어 맥락에 따라 파싱되고 실행된다. 스타일 시트(CSS)는 DOM 트리를 변경하지 않기 때문에 스크립트에 의해 문서 파싱을 기다리거나 중단할 이유가 없다.
참고 사이트 : https://d2.naver.com/helloworld/59361
https://cresumerjang.github.io/2019/06/24/critical-rendering-path/
'프론트엔드 로드맵' 카테고리의 다른 글
| 프론트엔드 로드맵 5 - 도메인 네임은 무엇일까? (0) | 2020.04.17 |
|---|---|
| 프론트엔드 로드맵 4 - DNS와 작동원리 (0) | 2020.04.16 |
| 프론트엔드 로드맵 2 - http는 무엇일까요? (0) | 2020.04.14 |
| 프론트엔드 로드맵 1 - 인터넷은 어떻게 동작하는가 (0) | 2020.04.13 |
| 2020 프론트엔드 개발자 로드맵 시작 (4) | 2020.04.13 |
