렌더링과 파싱

렌더링이 무엇일까?

브라우저가 서버에 파일을 요청하면, 서버는 요청받은 데이터를 찾아내어 바이트코드 형태의 문서로 전달하고,
브라우저에 속해 있는 렌더링 엔진이 다음과 같은 순서로 작업하여 원하는 페이지를 보여주게 된다.

1. HTML 문서를 파싱하고, 각 태그를 Dom 노드로 분리한다.
   (Dom tree 생성)
2. Css 문서를 파싱한다. (Cssom tree 생성)
3. HTML과 Css의 노드를 규칙에 맞추어 결합한 Render tree를 생성하고, 화면의 정확한 위치에 표시되게끔 Render tree를 배치한다.
4. 완성된 렌더트리는 각 HTML 요소의 레이아웃을 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.

(자료 : HTML의 Dom tree(Render tree 안에 속함)
이미지 출처 : https://i.stack.imgur.com/yUpNz.jpg)

Parsing
파싱은 읽어들인 텍스트 문서를 실행하기 위해서 문자열을 토큰(문법적으로 더는 나눌 수 없는 코드의 기본 요소)으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 브라우저가 이해할 수 있는 자료구조로 변환하는 작업이다.

즉, 렌더링이라는 것은 응답받은 데이터(Html, Css, Javascript, img 등)를 파싱하여 트리를 생성, 결합하고 만들어진 Render tree를 화면에 표시해주는 작업이라고 할 수 있겠다.