파싱
파싱은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행한다.
렌더링
렌더링은 HTML,CSS,자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.
브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다.
- 브라우저는 HTML,CSS,자바스크립트, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 SCCOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
- 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML요소를 페인팅한다.
브라우저의 핵심 기능은 필요한 리소스(HMTL,CSS,자바스크립트,이미지,폰트 등의 정적 파일 또는 서버가 동적으로 생성한 데이터)를 서버에 요청하고 서버로부터 응답받아 브라우저에 시각적으로 렌더링 하는 것이다.
브라우저의 요청에 의해 서버가 응답한 HTML문서는 문자열로 이루어진 순수한 텍스트다. 순수한 텍스트인 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링 하려면 HTML문서를브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 한다.
브라우저의 렌더링 엔진은 응답받은 HTML문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.즉 DOM은 HTML 문서를 파싱한 결과물이다.
CSS파싱과 CSSOM생성
렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나간다. 이처럼 렌더링 엔진은 DOM을 생성해 나가다가 CSS를 로드하는 link태그나 style태그를 만나면 DOM 생성을 일시 중단한다. 그리고 link태그의 href 어트리뷰트에 지정된 css파일을 서버에 요청하여 로드한 css파일이나 style태그 내의 css를 html과 동일한 파싱과정을 거치며 해석하여 CSSOM을 생성한다. 이후 CSS파싱을 완료하면 HTML파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM생성을 재개한다.
렌더트리 생성
렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM을 생성한다. 그리고 DOM과 CSSOM은 렌더링을 위해 렌더 트리고 결합된다.
렌더트리는 렌더링을 위한 트리 구조의 자료구조다. 렌더트리는 브라우저 화면에 렌더링 되는 노드만으로 구성된다.
자바스크립트 파싱과 실행
CSS파싱 과정과 마찬가지로 렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나가다가 자바스크립트 파일을 로드하는 script 태그나 자바스크립트 코드를 콘텐츠로 담은 script 태그를 만나면 DOM 생성을 일시 중단한다.
그리고 script태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 서버에 요청하여 로드한 자바스크립트 파일이나 script 태그 내의 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다. 이후 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML파싱이 중단된 시점부터 다시 HTML파싱을 시작하여 DOM생성을 재개한다.
렌더링 엔진으로부터 제어권을 넘겨받은 자바스크립트 엔진은 자바스크립트 코드를 파싱하기 시작한다. 렌더링 엔진이 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하듯이 자바스크립트 엔진은 자바스크립트를 해석하여 AST(Abstract Syntax Tree 추삭적 구문트리)를 생성한다. 그리고 AST를 기반으로 인터프리터가 실행 할 수 있는 중간 코드인 바이트 코드를 생성하여 실행한다.AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조다.
참고자료
모던 자바스크립트
