[Frontend] 브라우저 렌더링 과정

프론트엔드 개발자라면, 면접 질문으로 꼭 나오는 브라우저 렌더링 과정에 대해 정리해보았다. 

728x90

 

---

 

그 전에 우리가 브라우저에 들어가서 어떻게 렌더링까지 수행하게 되는지 알 필요가 있다! 예를 들어, www.google.com에 들어갔다고 하자.

 

브라우저는 어떻게 동작할까?

1. 주소창에 www.google.com을 입력하면, 도메인에 해당하는 부분을 IP주소로 바꾸기 위해 DNS 서버에 요청한다.
2. 브라우저는 전달받은 IP주소로 웹 서버를 연결(TCP)하고, 해당 문서를 요청한다. (이 과정에서 웹 서버가 처리하지 못하는 동적인 요청은 웹 애플리케이션 서버(WAS)가 처리)
3. 요청한 URL에 해당하는 모든 처리 결과를 브라우저에게 전달, 즉 서버로부터 응답받는다.
4. 서버로부터 응답된 리소스에 기반하여 브라우저 렌더링 과정을 거치고, 화면에 출력 된다. 

 

위처럼 브라우저 동작 과정의 마지막에 렌더링을 수행하게 되는데, 이를 더 자세히 살펴보자. 

 

브라우저의 렌더링 과정

1. 서버로부터 응답된 문서(HTML, CSS)를 파싱하여, DOM, CSSOM을 생성한다.
2. DOM, CSSOM을 결합하여 렌더 트리를 생성한다. 이 때, 자바스크립트 엔진은 JavaScript 문서를 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행하기 때문에, DOM, CSSOM이 변경되며 이는 다시 렌더 트리로 결합된다.
3. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산한다.
4. HTML 요소를 브라우저에 페인팅한다.

렌더링 과정

이렇게 브라우저는 필요한 리소스를 서버에 요청하고, 응답받아 렌더링하게 된다. 이것이 브라우저의 핵심 기능이다! 이 때, 서버는 암묵적으로 index.html을 응답하도록 되어있는데, 그 외 CSS, JavaScript, 이미지 등의 파일들도 응답된다. 이는 브라우저 렌더링 엔진이 HTML 문서를 파싱하는 도중에 외부 리소스를 로드하는 태그를 만나기 때문이다. 그렇다면.. 

 

브라우저 렌더링 과정에서 JavaScript를 만나면 어떻게 될까?

한마디로 요약하자면, 브라우저 렌더링 엔진은 HTML 파싱을 일시 중단한다!

 

JavaScript 파싱에 의한 HTML 파싱 중단

위 그림과 같이 HTML 파싱 중 <link>나 <script>태그와 같이 외부 리소스를 로드하는 태그를 만나면 HTML 파싱을 중단하고, 해당 리소스 파일을 서버로 요청한다. JavaScript 파일을 파싱하기 위해서는 렌더링 엔진에서 자바스크립트 엔진에 제어권을 넘기게 되는데, 이후 파싱과 실행이 종료되면 다시 렌더링 엔진으로 제어권을 넘겨 HTML 파싱이 중단된 지점부터 다시 시작한다.