[38장] 브라우저의 렌더링 과정

ㅇ파싱(parsing, 구문분석, 해석)
텍스트로 짜여진 코드를 읽어 들여 텍스트 문서상의 문자열을 토큰으로 분해(어휘분석)하고, 
토큰에 문법적 의미와 구조를 반영해 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정
일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간언어인 바이트코드를 생성하고 실행한다

ㅇ렌더링(rendering)
HTML, CSS, JS로 작성된 문서를 파싱해 브라우저에 시각적으로 출력하는 것. 렌더링 과정은 아래와 같다.

1. 브라우저가 HTML, CSS, JSM 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청, 서버로부터 응답받음
2. 브라우저의 렌더링 엔진은 서버가 준 HTML과 CSS를 파싱해 DOM과 CSSOM을 생성, 이들을 결합해 렌더 트리 생성
3. 브라우저의 자바스크립트 엔진은 서버가 준 JS를 파싱해 AST(Abstract Syntax Tree)를 생성, 바이트 코드로 변환해 실행. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있는데, 변경된 DOM과 CSSOM은 다시 렌더트리로 결합됨
4. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅

1. 요청과 응답

  가. 브라우저 핵심 기능
    - 필요한 리소스(HTML, CSS, JS, img, font 등의 정적 파일 / 서버가 동적으로 생성한 데이터)를 서버에 요청하고 응답받아 시각적으로 렌더링
    - 즉, 필요한 리소스가 모두 서버에 있으니 서버에 요청하고 응답받은 리소스를 파싱해서 렌더링 하는게 핵심 기능

나. 요청과정

  1) 과정
    - 브라우저의 주소창에 URL을 입력
    - URL의 호스트이름이 DNS를 통해 IP주소로 변환
    - 해당 IP주소를 갖는 서버에 요청이 전송됨
    - 주소창에 루트요청(스킴과 호스트만으로 구성된 URI에 의한 요청)시 암묵적으로 index.html을 응답함
    - index.html 외 다른 정적 파일을 서버에 요청하려면 정적 파일의 경로와 파일이름을 패스에 기술
    - 주소창 외에 JS를 통해 동적으로 서버에 데이터 요청도 가능(AJAX)

  2) 특징
    - 루트요청만 해도 CSS, JS, 이미지 등이 응답된다
    - 이는 브라우저 렌더링 엔진이 index.html 파싱 도중 외부 리소스를 로드하는 태그(CSS-link태그, 이미지-img태그, 자바스크립트-script태그)등을 만나면 HTML 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청하기 때문

2. HTTP 1.1 / HTTP 2.0
HTTP란 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)
99년에 HTTP 1.1이 나왔고 2015년에 HTTP 2.0 나왔는데 살펴보도록하자
  가. HTTP 1.1
    - 커넥션당 하나의 요청과 응답만 처리(동시전송 불가)
    - HTML 문서내 link태그, img태그, script태그 등을 만나면 개별적으로 리소스 요청이 전송/응답된다

  나. HTTP 2.0
    - 커넥션당 여러 요청과 응답 가능(다중 요청/응답)
    - HTTP 1.1대비 페이지 로드 속도가 약 50% 빠름

 

3. HTML 파싱과 DOM 생성 (DOM = HTML 문서의 파싱 결과물)
브라우저의 요청에따라 서버가 응답한 HTML 문서는 순수한 텍스트 문서다.
텍스트 덩어리를 브라우저에 시각적인 픽셀로 런데링하려면 HTML 문서를 브라우저가 이해가능한 구조(객체)로 변환해 메모리에 저장해야 한다.
그리고 브라우저 렌더링 엔진은 아래 과정을 거쳐 HTML 문서를 파싱, 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다

  [1] 서버가 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 경유해 응답
  [2] 브라우저는 바이트 형태의 HTML 문서를 응답받고, meta태그의 chartset 어트리뷰트에 지정된 인코딩 방식(UTF-8 같은) 기준으로 문자열로 변환.
  [3] 문자열로 변환된 HTML 문서를 토큰들로 분해
  [4] 각 토큰들을 객체로 변환하여 노드를 생성. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생성되는데 노드는 이후 DOM을 구성하는 기본 요소가 됨
  [5] HTML 요소 간의 부자 관계를 반영해 노드들을 트리 자료구조로 구성, 이 노드들로 구성된 트리 자료구조를 DOM이라고 부른다
    * HTML 문서는 HTML 요소들의 집합으로 구성되며 HTML 요소는 중첩 관계를 갖는다. 즉, HTML 요소의 콘텐츠 영역(시작태그와 종료태그 사이)에는 텍스트 뿐만 아니라 다른 HTML 요소도 포함될 수 있고, HTML 요소 간에는 중첩 관계에 의해 부자 관계가 형성됨.