대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 자바스크립트는 브라우저 위에서 HTML, CSS, JS를 실행한다. 이를 위해 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하고 렌더링하는지 알아보자.
브라우저의 렌더링 과정
- 브라우저는 HTML, CSS, JS, 이미지, 폰트 등의 리소스를 서버로부터 요청하고 응답받는다.
- 브라우저는 서버로부터 응답받은 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답받은 JS를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다.
이때 자바스크립트 엔진은 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. - 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인트하여 브라우저 화면에 표시한다.
38.1 요청과 응답
브라우저는 서버로부터 HTML, CSS, JS, 이미지, 폰트 등의 리소스(정적 파일 또는 서버가 동적으로 생성한 데이터)를 요청하고 응답받는다.
38.2 HTTP 1.1과 HTTP 2.0
HTTP는 클라이언트와 서버 간에 요청과 응답으로 데이터를 교환하기 위한 통신 규약이다.
HTTP를 왜 만들었는가? HTTP 등장 이전에는 FTP, SMTP, NNTP 등의 프로토콜이 존재했다.
각각 목적에 맞게 설계된 프로토콜이어서 서로 다른 프로토콜을 사용하는 서버와 클라이언트는 통신할 수 없었다.
이를 해결하기 위해 HTTP가 등장했다.
HTTP 1.1은 1997년에 등장했고 현재까지 가장 많이 사용되는 HTTP 프로토콜이다. 하나의 연결에 하나의 요청과 응답을 처리한다.
HTTP 2.0은 하나의 연결에 여러 요청과 응답을 처리할 수 있다.
HTTP 2.0을 적용한 웹 사이트는? Google, YouTube, Facebook, Twitter, Wikipedia 등등.
38.3 HTML 파싱과 DOM 생성
과정 설명
1. 요청이 발생하면 서버는 HTML, CSS, JS를 포함한 리소스를 응답한다. 이때 서버는 요청한 html 파일을 읽어들여 메모리에 저장한다음, 저장된 바이트를 인터넷을 경유하여 응답한다.
2. 브라우저는 서버가 응답한 html 파일을 바이트 형태로 읽어들인다. 그리고 읽어들인 바이트를 문자열로 변환한다.
3. 문자열로 변환된 문서를 읽어 들여 문법적 의미를 가진 최소 단위인 토큰으로 분해한다.
4. 분해된 토큰을 객체로 변환하여 노드들을 생성한다.
5. 생성된 노드들을 트리 구조로 구성한다. 이를 DOM(Document Object Model)이라 한다. CSSOM도 거의 비슷
38.5 렌더 트리
렌더 트리는 DOM과 CSSOM을 결합하여 생성한다.
38.6 자바스크립트 파싱과 실행
DOM은 HTML 요소와 스타일을 변경할 수 있는 API를 제공한다. DOM API 라고 하며, getElementById, querySelector, addEventListener 등이 있다.
HTML, CSS와 마찬가지로 위에서 아래로 파싱되고 Abstract Syntax Tree(AST)를 생성한다.
AST는 자바스크립트 엔진이 자바스크립트 코드를 실행하기 위해 필요한 구문을 추상적으로 표현한 트리 자료구조이다. 그리고 AST를 기반으로 바이트코드로 변환하여 실행한다.
38.7 리플로우와 리페인트
리플로우 : 레이아웃을 다시 계산하는 것
리페인트 : 레이아웃을 다시 그리는 것
느낀점
브라우저 렌더링 원리를 이해하면 DOM, 노드, AJAX, 이벤트, 비동기 처리, 렌더링 최적화 등을 이해하는데 도움이 될것 같다. 면접에서도 자주 물어보는 주제라서 중요한 파트다.
Q. 브라우저의 렌더링 과정을 설명하시오.
Q. Reflow와 Repaint가 실행되는 시점.
Q. 주소창에 URL을 입력하면 어떤 일이 일어나는가?
Q. CORS를 대응하는 방법은?
