프론트엔드 개발자는 당연히 브라우저와 연결되어있을 수밖에 없는데 이번 스터디 주제는 브라우저 렌더링 과정에 대한 부분이었다. 예전에 취업을 준비하며 단순히 기술면접을 대비해 암기했던 기억이 있지만 이제는 단순 암기가 아닌 브라우저 렌더링 과정을 좀 더 자세하게 살펴보고 이해해보고자한다. 사용자가 브라우저 주소창에 주소를 입력하면 어떤 과정이 일어날까?
1. 브라우저의 기능
브라우저는 쉽게 말해 우리가 평소에 사용하는 인터넷이라고 생각하면 되는데 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 이정도를 가장 많이 사용할 것이다. 나는 평소에 크롬을 주로 사용하는데 오픈소스 브라우저가 시장에서 상당 부분을 차지하고 있다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 기능을 수행하는데 자원의 주소는 URI에 의해 정해지며, HTML, CSS의 명세에 따라 HTML 파일을 해석하여 표시한다. 대부분의 브라우저는 비슷하게 생겼고 그 이유는 W3C에서 정한 웹 표준화의 기준 때문이다.
2. 브라우저의 기본 구조
브라우저는 기본 구조를 가지고 있는데 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료저장소의 기본 구조를 가지고 동작한다.
- 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 북마크 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 부분
- 렌더링 엔진 : 요청한 콘텐츠를 표시하기 위해 HTML과 CSS를 파싱하는 부분
- 통신 : HTTP 요청과 같은 네트워크 호출에 사용됨
- UI 백엔드 콤보 박스와 창 같은 기본적인 장치를 그리는 역할
- 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행하는 역할
- 자료 저장소 : 자료를 저장하는 계층으로 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음
3. 렌더링 엔진
렌더링 엔진은 요청 받은 내용을 브라우저 화면에 표시하는 역할을 수행하는데 아래의 과정을 거쳐 동작한다.
1. DOM 트리 구축을 위한 HTML/CSS 파싱 과정
- 렌더링 엔진은 가장 먼저 HTML 문서를 파싱하고 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환한다.
- 그 다음 CSS 파일도 스타일 규칙에 맞게 파싱한다.
2. 렌더 트리 구축
- 파싱된 HTML과 CSS로 렌더트리를 생성한다.
3. 렌더 트리 배치와 그리기
- 렌더 트리 구축 단계 이후 배치가 시작되는데 각 노드가 화면의 정확한 위치에 표시되는 것을 의미하며, 이를 화면에 보여준다.
4. 브라우저 렌더링 과정 정리
개발자가 작성한 문서를 브라우저 화면에 출력하기 위해선 렌더링 과정을 거쳐야하는데 우리가 주소창에 원하는 사이트의 주소를 입력하면 아래와 같은 과정이 일어난다.
1. 서버에서 받아온 HTML/CSS 문서를 DOM과 SSOM으로 변환하여 DOM트리와 SSOM트리로 만든다.
2. 변환된 DOM 트리와 SSOM 트리로 렌더트리를 생성한다.
3. 렌더 트리에서 각 노드들이 가지고 있는 속성과 스타일에 따라 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산하여 배치한다.
4. 요소들의 위치와 크기, 스타일 계산이 완료된 렌더트리를 이용해 픽셀 값을 채워넣게 된다. 레이아웃이 완료된 후 실제 화면에 나타나는 단계이다.
* 여기서 파싱이 이루어지는 동안 스크립트를 만나게 되면 script 코드실행을 위해 HTML과 CSS 파싱은 중단된다.
