파싱(parsing)
데이터를 분해, 분석하여 원하는 형태로 조립하고 다시 빼내는 프로그램(파서, parser)을 이용해, 주어진 데이터를 원하는 형태로 가공하여 서버에서 불러들이는 것이다.
파싱(parsing, 구문분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰(token)으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리(parse tree)를 생성하는 일련의 과정을 말한다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어(infermediate code)인 바이트코드(bytecode)를 생성하고 실행한다.
렌더링(rendering)
렌더링(rendering) 또는 이미지 합성(image synthesis)은 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다.
렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.
브라우저 렌더링(browser rendering)
개인적으로 면접에서 한번 쯤은 받았던 질문 중 하나는 이거였다.
google.co.kr에 접속 후 구글 메인 페이지를 눈으로 확인하기 까지 무슨 일들이 벌어지는가?
이에 대한 답은 다음과 같다.
- 브라우저 캐시(browser cache), OS 캐시(OS cache), 라우터 캐시(router cache) 확인
- DNS(domain name service) 서버 접속, DNS lookup으로 웹 서버 IP 주소 획득
- TCP/IP 프로토콜을 사용해, 웹 브라우저와 웹 서버가 연결됨
- HTTPS, SSL를 이용한 암호화를 통한 보안 처리
- load balancer로 여러대의 웹 서버중 트래픽을 가장 잘 받을 수 있는 서버에 요청 할당
- 웹 서버에 HTTP request 후 HTTP response로 HTML 문서를 받는다.
- 브라우저 렌더링 웹 브라우저에 뿌려진 구글 로고 및 구글 메인 페이지를 확인 한다.
이번 글은 7번째 항목에 해당하는 브라우저 렌더링(browser rendering)이다.
즉 브라우저 렌더링은 웹 서버에서 웹 브라우저가 HTML 문서를 받은 이후 일어나는 일이다.
DOM(document object model) 생성
서버에 존재하던 HTML 파일이 웹 브라우저의 요청(request)에 의해 응답(response) 된다. 웹 브라우저는 서버가 응답한 HTML 문서를 바이트 형태로 응답받는다.
응답된 바이트 형태의 HTML 문서는 응답 헤더(response header)에 담긴 인코딩 방식에 따라 문자열로 변환되는데, 응답 헤더의 인코딩 방식은 해당 HTML 문서 meta tag안에 있는 charset attribute에 선언된 인코딩 방식과 같다.
문자열로 변환된 HTML 문서는 문법적 의미를 갖는 코드의 최소 단위인 토큰(token)으로 분해된다. 이 후 각 토큰들을 객체로 변환하여 노드(node)들을 생성한다.
따라서 HTML 문서는 HTML 요소들의 집합으로 이루어졌다고 할 수 있으며, HTML 요소는 중첩 관계를 갖는다.
이는 HTML 요소의 콘텐츠 영역에는 텍스트 뿐만이 아닌 다른 HTML 요소도 포함될 수 있다는 것을 의미하는데, 따라서 HTML 요소간에는 중첩 관계에 의한 부자 관계가 성립 할 수 있다. 따라서 이 관계를 표현하기 적합한 트리 자료구조로 표현한 것이 DOM(document object model)이다.
CSSOM(CSS object model) 생성
브라우저 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성한다. 하지만 렌더링 엔진은 DOM을 생성해 나가는 중, CSS를 로드하는 link tag, style tag를 만나면 DOM 생성을 일시 중단한다.
그리고 link 태그에 지정된 CSS 파일을 웹 서버에 요청하여, 로드한 CSS 파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱 과정을 거치며 CSSOM(CSS object model)을 생성한다. 이 후 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하여 DOM 생성을 재개한다.
렌더 트리(render tree) 생성
브라우저 렌더링 엔진을 통해 HTML과 CSS 파싱 작업이 완료되어, DOM과 CSSOM 생성이 완료되었다.
이제 DOM과 CSSOM를 결합해 렌더 트리(render tree)를 생성한다. 렌더 트리는 오직 렌더링만을 위한 트리 구조의 자료구조이며, meta 태그, script 태그, CSS 속성(display: none) 등 화면에 렌더링 되지 않는 노드는 포함되지 않는다.
레이아웃(layout) 계산 및 페인팅(painting)
렌더 트리가 완성되면, 각 HTML 요소의 위치와 크기를 계산하는 레이아웃(layout) 작업이 진행된다.
이 후 웹 브라우저 화면에 픽셀이 렌더링되는 페인팅(painting) 작업까지 완료되면, 사용자는 모니터에서 그 결과물을 확인 할 수 있다.
리렌더링(re-rendering)
- 자바스크립트에 의한 노드의 추가, 삭제
- 브라우저 창의 리사이징(re-sizing)에 의한 뷰포드(viewport) 크기 변경
- HTML 요소의 레이아웃에 변경이 발생되는 CSS 스타일의 변경
다음과 같은 경우 브라우저의 렌더링 과정은 반복해서 실행될 수 있다.
브라우저 렌더링 과정 중 레이아웃 계산과 페인팅을 다시 실행하는 리렌더링은 비용이 가장 많이 드는 작업이다. 따라서 React.js 등 프론트엔드 라이브러리는 가상 돔(virtual DOM)을 사용 해 성능 이슈를 해결한다.
자바스크립트 파싱
CSS 파싱 과정과 동일하게 브라우저 렌더링 엔진은 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중단 후, 웹 서버에 자바스크립트 파일을 요청한다.
이 후 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다. 그리고 모든 작업이 끝나면 렌더링 엔진으로 제어권을 넘겨 다시 HTML 파싱을 시작, DOM 생성을 재개한다.
자바스크립트 엔진은 자바스크립트 코드를 파싱하여 CPU가 이해 가능한 저수준 언어(low-level language)로 변환 및 실행하는 역할을 한다.
눈여겨볼점은 브라우저 렌더링 과정은 동기적(synchronous)인데, 이는 script 태그의 위치에 따라 HTML 파싱이 블로킹(blocking)되어 DOM 생성이 지연될 수 있다는 것을 의미한다. 따라서 script 태그의 위치는 중요한 의미를 갖는다.
토크나이징(tokenizing)
단순한 문자열로 이루어진 자바스크립트 소스코드를 어휘 분석(lexical analysis)하여 토큰들로 분해한다.
파싱(parsing)
이후 토큰들의 집합을 구문 분석(systactic analysis)하여 AST(추상적 구문 트리, abstract syntax tree)를 생성한다. AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조이다.
바이트코드(bytecode) 생성 및 실행
파싱의 결과물로서 생성된 AST는 인터프리터가 실행할 수 있는 중간 단계의 코드인 바이트코드로 변환되고, 인터프리터에 의해 실행된다.
Reference
모던 자바스크립트 Deep Dive
이웅모 저 | 위키북스 | 2020년 09월 25일
