"렌더링이 무엇인가요?"
첫 면접 당시 해당 질문을 받고, 당황해 말을 잇지 못했다. 평소 당연히 알고 있다고 여겼던 개념이었지만, 갑자기 머릿속이 텅 비어있는 것처럼 제대로 답변하지 못했었다.
개발자로 입사하여 업무를 진행하면서 위와 같은 경험을 겪었다. 동료 개발자와 협업시, 정확한 용어를 사용하지 못해 명확한 의사소통이 안되었다던지, 클라이언트 혹은 상사에게 작업 진행 상황이나 결과물을 보고할 때 개념적인 부분을 충분히 설명하지 못해서 내가 구현한 기능을 완벽하게 설명하지 못하는 것 같은 느낌을 받아 스스로 답답했던 적이 있었다.
그래서 다시 기본 개념부터 확실하게 잡아보려고 한다.
그래서 렌더링이 뭐라고?
일반적으로 웹 개발에서 렌더링이란 HTML, CSS, 자바스크립트로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것을 말한다.
우리가 만약 특정 웹 사이트에 접속한다고 생각해보자. 특정 도메인을 주소창에 입력하면, 웹(클라이언트)은 해당 웹의 서버로 브라우저에서 보여줘야 하는 요소들(리소스)를 요청한다. 그 요청으로 받은 HTML, CSS, 자바스크립트를 파싱하여 클라이언트에서 출력하는 것이 바로 렌더링.
간단하게 마크업을 하고 실행시킨 후 네트워크 탭을 확인해보았다. index.html로 get 요청을 보낸 후, style.css와 script.js로도 get 요청을 보낸 것을 확인할 수 있었다.
퍼포먼스 탭에서 parsing과 실행순서를 좀 더 자세히 확인할 수 있다.
가장 먼저 index.html 파일이 다운로드 되고 파싱되는 중에 script 파일이 로드되고, 파싱되는 것처럼 보인다. 그리고 html 파싱이 완료되면 layout을 계산하고, 브라우저에 프린팅된다. 마치 html의 파싱과 scipt 파싱이 동시에 이루어지는 것처럼 보이지만, 실제로는 script 파싱이 진행되는 동안에는 html의 파싱은 잠시 중단된다. 그리고 script의 파싱이 종료 된 후 html 파싱이 재개된다.
좀 더 간단하게 브라우저의 렌더링 과정을 표로 만들어보았다.
-
html 로드 및 파싱, DOM 생성
브라우저는 2개의 엔진이 내장되어 있다. 렌더링 엔진과 자바스크립트 엔진. 서버로 요청을 보내고, 그 응답으로 index.html을 받았다면 렌더링 엔진은 이를 parsing 하고, 그 결과물로 DOM을 생성한다. -
CSS 로드 및 파싱, CSSOM 생성
index.html을 위에서부터 차례대로 파싱하며 DOM을 생성해 나가는 중에 링크 태그를 만나면, 파싱을 잠시 멈추고, 브라우저는 다시 서버에게 링크 태그에 참조된 style.css를 요청한다. 렌더링 엔진은 응답받은 style.css를 파싱하고, 파싱된 결과물로 CSSOM을 생성한다. CSS의 파싱이 완료되면 렌더링 엔진은 일시 중단되었던 html 파싱을 재개한다. -
JavaScript 로드 및 파싱, AST 생성
그리고 script 태그를 읽을 때, 다시 html 파싱을 잠시 멈추고, 서버에게 script 태그에 참조된 js 파일을 요청한다. 응답받은 js 파일을 파싱하기 위해 자바스크립트 엔진에게로 제어권이 넘어간다. 자바스크립트 엔진은 js 코드를 더 이상 분해할 수 없는 단위인 token으로 분해한 후 파싱하여 AST를 생성한다. 생성된 AST를 기반으로 인터프리터가 실행할 수 있도록 바이트코드를 생성하여 실행한다. 자바스크립트 파싱이 완료된 후 다시 제어권은 렌더링 엔진으로 넘어가서 html 파싱을 재개한다.
*. script 태그에 async, defer 속성이 있다면 HTML 파싱이 중단되지 않고, 조금 다른 방식으로 진행된다.
- 렌더트리 생성 및 렌더링
HTML 파싱의 결과물로 생성된 DOM과 CSS 파싱의 결과물로 생성된 CSSOM은 렌더트리로 결합된다. 이 렌더트리를 기반으로 레이아웃과 페인트 과정을 거쳐서 브라우저 화면에 렌더링 된다.
만약 자바스크립트 코드에 DOM, CSSOM을 변경하는 DOM API가 사용된 경우, 그에 따라 렌더트리도 업데이트 되고, 변경된 렌더트리를 기반으로 레이아웃 계산을 실행시키는 reflow와 repaint를 거쳐서 브라우저 화면에 재렌더링 된다.
