브라우저 렌더링
브라우저 렌더링 과정은 프론트엔드 기술 면접에서 자주 나오는 중요한 주제입니다!
그렇다면 왜 브라우저 렌더링 과정을 중요하게 여기고, 우리가 그에 대해서 알아야 할까요?
브라우저 렌더링 원리를 알아야 하는 이유
웹 브라우저는 뼈대를 이루는 HTML, 살을 붙여 꾸며주는 CSS, 그리고 그것의 동작을 수행하는 자바스크립트가 함께 실행됩니다.
따라서 의도대로 코드를 실행시키려면 브라우저가 우리가 작성한 코드를 어떤 순서대로 읽어주는지
즉, 브라우저가 어떠한 순서로 렌더링 되는지를 파악해야 더 효율적인 코드를 작성할 수 있습니다.
Okay!
이제부터 우리가 지난 시간에 배웠던 DOM이라는 개념을 활용해서
브라우저가 어떻게 HTML, CSS, JS 코드들을 파싱하고 브라우저에 렌더링을 하는지 알아보겠습니다.
Parsing
브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야 합니다.
그러나 HTML 파일은 그저 문자열로 이루어진 순수한 텍스트이기 때문에 브라우저가 이해할 수 없습니다 😫
따라서 번역이 필요합니다.
브라우저는 파싱을 통해 HTML 파일을 해석하여 DOM Tree를 구성합니다.
지난 시간에 배운 내용을 활용할 때가 되었군요!
DOM Tree가 무엇이었죠?
DOM Tree는 브라우저가 이해할 수 있는 노드들로 구성된 트리 자료구조를 뜻합니다.
파싱 중 HTML에 CSS가 포함되어 있다면 파싱을 통해 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행합니다.
Okay!
파싱을 통해 HTML과 CSS 파일을 브라우저가 이해할 수 있는 트리 구조로 변환하는군요!
Style
Style 단계에서는 DOM Tree와 CSSOM Tree를 결합시켜서 렌더링을 위해 렌더 트리(Render Tree)를 구성합니다.
여기서 흥미로운 사실은 렌더 트리는 브라우저 화면에 보여지지 않는 것들은 포함하지 않습니다.
예를 들어서, visibility: hidden 속성은 요소가 공간을 차지하고 보이지만 않기 때문에 렌더 트리에 포함이 됩니다.
하지만 display: none 의 경우는 공간을 차지하지 않기 때문에 렌더 트리에서 제외됩니다.
Layout
Layout 단계에서는 렌더 트리를 화면에 배치하기 위해 정확한 위치와 크기를 계산합니다.
루트부터 노드를 순회하면서 노드의 위치와 크기를 계산하고 렌더 트리에 반영합니다.
Paint
Paint 단계에서는 Layout 단계에서 계산된 값을 이용하여 각 노드들을 화면 상의 실제 픽셀로 변환합니다.
이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리됩니다.
브라우저 화면에 픽셀을 렌더링 하는 과정이라고 이해하면 좋습니다.
Composite
Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냅니다.
이제 우리는 화면에서 웹 페이지를 볼 수 있습니다 ✨
Okay!
그래프를 보면서 과정을 정리해봅시다.
과정을 한 번에 확인해 봅시다
페이지가 로드 되었을 때의 네트워크 동작 순서입니다.
숫자를 천천히 따라가면서 앞의 내용을 떠올려보도록 하겠습니다.
Send Request: 서버에게 HTML, CSS, JS 파일을 요청합니다.Parse HTML: 서버로부터 받아온 HTML 파일을 파싱합니다. DOM Tree를 구축합니다.Parse Stylesheet: CSS 파일을 파싱하여 CSSOM Tree를 구축합니다.Evaluate Script: JS 파일을 실행합니다.Layout: 렌더링 트리의 노드들의 위치와 크기를 계산합니다.Paint: 렌더링 트리의 노드들의 픽셀을 렌더링 합니다.Composite Layers: Paint 단계의 레이어를 합성하여 화면에 나타냅니다. 우리는 실제 화면을 볼 수 있습니다 ✨
글을 마치며
지금까지 브라우저 렌더링 과정에 대해서 알아봤습니다.
이제 웹 사이트들이 어떻게 그려지는지 이해할 수 있게 되었습니다!
그렇다면 이 웹 사이트들을 더 빠르게 로딩하고 버벅거리지 않게 하는 방법은 없을까요?
이번에 배운 지식을 활용하면 렌더링을 최적화하는 방법도 금방 배울 수 있습니다.
다음 포스팅에서 배워봅시다!
웹 개발 지식 쉽게 배우기 🤗
