들어가며
저에게 “브라우저”란 익숙하지만 막상 설명하라고 하면 정의하기 어려운 단어인데요..
저는 그저 ‘browse= 훑어보다’라는 뜻처럼, 우리가 보는 인터넷에서 어떤 정보를 훑어보는 것으로만 대충 알았습니다.
그리고 저의 렌더링지식은 아주 얕고 좁은데 공부하면 할수록, 그 얕고 좁은 지식이 큰 부메랑이 되어 제 뒷통수를 후려쳤습니다..핳
(이제는 더 이상 물러날 곳이 없다!)
이번 기회에 렌더링 과정을 직접 시각화로 정리하면서, 그동안 제가 작성했던 코드들이 실제로 어떻게 흘러갔는지 이해해보려 합니다.
브라우저란?
웹 브라우저(Web Browser)은 웹에서 페이지를 검색하고 표시하며, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있게 도와주는 프로그램입니다.
- 하이퍼링크(hyperlink) : 보통 ‘링크’라고 부르며, 특정 URL에 연결된 텍스트나 이미지를 클릭하면 해당 주소로 이동할 수 있게 해줍니다.
현재 데스크톱에서 사용되는 주요 브라우저는 Chrome, Internet Explorer, Firefox, Safari, Opera 가 있습니다. (※ Internet Explorer는 2022년부로 공식 지원이 종료되었습니다.)
브라우저의 기본 기능은 서버에 웹 리소스를 요청하고, 응답을 받아 이를 화면에 표시하는 것입니다.
리소스는 HTML 문서뿐 아니라 PDF, 이미지, 동영상 등 다양한 형태일 수 있습니다.
브라우저 구조
1. 사용자 인터페이스
- 주소 표시줄, 뒤로/앞으로 가기 버튼, 북마크 메뉴 등 웹페이지 내용 외부의 조작 영역입니다.
2. 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
→ 사용자의 입력을 렌더링 엔진에 전달하고, 렌더링 엔진이 HTML과 CSS를 파싱하며 DOM을 생성하는 동안 상태를 추적하여 ‘로딩 중’, ‘새로고침’ 등의 UI 상태를 업데이트합니다.
→ 또한 CORS, 쿠키, 세션 등 보안 관련 정책을 관리하고, 렌더링 엔진이 이를 위반하지 않도록 제어합니다.
→ 사용자가 ‘뒤로 가기’ 버튼을 누르면, 브라우저 엔진은 렌더링 엔진에게 캐시를 이용해 이전 페이지로 돌아가도록 지시합니다.
⇒ 즉, 브라우저 엔진은 사용자의 행동과 렌더링 결과 사이를 연결하는 역할을 합니다.
3. 렌더링 엔진
- 요청한 컨텐츠 표시합니다.
→ HTML을 요청하면 HTML 과 CSS를 파싱하여 화면에 표시합니다.
→ 이때 렌더링 엔진이 수행하는 일련의 과정을 렌더링 파이프라인(Rendering Pipeline) 이라고 합니다.
→ 렌더링 파이프라인은 DOM 트리 생성부터 CSSOM, 렌더 트리, 레이아웃, 페인팅, 컴포지팅 단계로 이어집니다.
4. 통신
- HTTP 요청과 같은 네트워크 작업을 수행하는 모듈입니다.
- 플랫폼 독립적인 인터페이스로, 실제 네트워크 처리는 OS 수준에서 실행됩니다.
→ 개발자는fetch()나XMLHttpRequest같은 공통 API를 사용하지만, 실제로 OS 수준에서는 Windows의 Winsock, macOS의 BSD Socket, Linux의 Socket 등 서로 다른 네트워크 시스템을 사용합니다. 이 차이를 통신 모듈의 내부에서 맞춰줍니다.
5. 자바스크립트 해석기
- 자바스크립트 코드를 해석하고 실행합니다.
- HTML, CSS는 단순히 읽어서 표시하면 끝이지만, 자바스크립트는 실행을 해야됩니다.
이때 브라우저에서 내장된 JS엔진이 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하고 실행합니다.- 대표적으로 Chrome, Edge, Opera는 V8, Safari는 JavaScriptCore (Nitro)를 사용합니다.
6. UI 백엔드
- 콤보박스, 버튼, 스크롤바 같은 브라우저 자체의 기본 UI 요소(창, 탭, 스크롤 등)를 그리고,
렌더링 엔진이 만든 웹 콘텐츠를 실제로 화면에 그려주는 그래픽 계층입니다. - 운영체제의 그래픽 시스템을 사용하지만, 브라우저 내부에서는 공통 인터페이스를 통해 관리되기 때문에 플랫폼(Windows, macOS, Linux 등)에 종속되지 않습니다.
→ 즉, 운영체제별로 서로 다른 UI 시스템을 통일된 방식으로 사용할 수 있도록 도와줍니다.
7. 자료 저장소
- 브라우저에서 사용하는 데이터를 저장하는 계층입니다.
- 쿠키, 캐시, localStorage, sessionStorage 등 다양한 형태의 데이터를 저장하는 계층입니다.
→ HTML5 명세에는 브라우저 내부에 데이터를 저장할 수 있는 기능(API) 이 포함되어 있습니다. 서버가 아닌 사용자 브라우저(클라이언트)에 데이터를 저장 할 수 있습니다.
브라우저의 렌더링 파이프라인
브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정입니다. 크게 6단계로 나눌 수 있습니다.
각 단계는 브라우저 내부에서 순차적으로 수행되며, 일부 단계가 다시 실행되면 성능에 영향을 줄 수 있습니다.
1. DOM 트리 생성
- 브라우저는 HTML 파일을 받으면 파싱을 시작합니다.
- HTML Parser는 파일을 바이트 단위로 읽어 문자로 변환한 뒤, 이를 다시 HTML 토큰으로 변환합니다.
- HTML 토큰에는 시작 태그, 종료 태그, 속성 이름과 속성 값이 있습니다. 따라서 브라우저는 토큰이 생성되면 이를 기반으로 DOM 트리를 생성합니다.
- DOM트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드가 되어 부모-자식 관계를 형성합니다. 태그 1개당 노드 1개가 됩니다.
- link, img 태그는 노드를 생성할때 브라우저가 해당 리소스를 다운 받습니다.
<script>태그를 만나면 DOM 생성을 잠시 중단하고 자바스크립트를 실행합니다.
2. CSSOM 생성
- 브라우저는 css파일을 파싱합니다.
css 파일도 html 파일과 마찬가지로 바이트 단위로 읽은 뒤 문자로 변환합니다.
그 후, css 규칙으로 문자열을 나누는데 선택자와 선언자로 구별합니다. - 선택자는 스타일을 적용할 HTML 요소를 정의하고, 선언부에는 실제 스타일 규칙이 작성됩니다.
즉, 선택자에는 html 요소, 선언에는 css 정보가 담기게됩니다. 이 규칙을 기반으로 cssom 트리를 생성합니다. - CSSOM 트리는 DOM 트리와 유사한 구조이며, 각 노드에 스타일 정보가 담겨 있습니다.
3. 렌더 트리 생성
- DOM 트리와 CSSOM 트리를 합쳐서 렌더 트리를 생성합니다.
- display:none은 렌더트리에 포함되지 않습니다.
4. 레이아웃 (Layout)
-
브라우저가 렌더 트리를 사용해 각 요소의 정확한 위치와 크기를 계산하는 과정입니다.
-
리플로우(reflow)
-
DOM, CSS 스타일이 변경되면 브라우저가 각 화면의 요소를 다시 계산하는 과정입니다.
부모 노드의 레이아웃 변화는 자식 노드의 레이아웃까지 영향을 미쳐 reflow를 발생시킵니다.
일반적으로 리플로우는 리페인트까지 발생하기 때문에 성능에도 영향을 미칩니다.
-
reflow를 유발하는 css 속성
- 크기 관련 속성 :
width,height,padding,margin등 - 위치 관련 속성 :
position,top,left등 - 레이아웃 관련 속성 :
display,flex등 - 폰트 크기 관련 속성 :
font-size,font-weight등
- 크기 관련 속성 :
-
최적화 하는 방법
- reflow를 유발하는 css 속성 최소화로 사용하기
렌더링 성능을 최적화 하기 위해서는가능한 CSS스타일을 미리 설정해 초기 로드 시에만 계산이 이루어지도록 하고, 이후에는 변경하지 않는 것이 좋습니다.
- reflow를 유발하는 css 속성 최소화로 사용하기
-
5. 페인팅(Painting)
- 브라우저가 각 요소를 실제 화면에 그리는 작업으로 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려집니다.
- 화면에 표시될 그래픽 요소를 생성하는 과정이기 때문에 복잡한 그래픽이나 애니메이션은 페인팅 작업이 많아져 성능이 저하될 수 있습니다.
- 리페인트(rePaint)
- 웹 페이지에서 요소의 레이아웃은 그대로인데 색상이나 배경 등 요소의 모양이나 스타일이 변경될 때 다시 화면에 그리는 과정입니다.
- 브라우저는 요소의 모양만 다시 그리면 되기 때문에 reflow보다는 비용이 덜 들지만, 여전히 성능에 영향을 줄 수 있습니다.
DOM, CSS 스타일이 변경되면 브라우저는 각 화면의 요소를 다시 계산해야 합니다. - rePaint 유발하는 css 속성
- 색상 관련 속성 :
color,background-color등 - 테두리 관련 속성 :
border-color,border-radius등
- 색상 관련 속성 :
- 최적화 하는 방법
- CSS 애니메이션에
transform,opacity사용하기
transform,opacity은 레이아웃이나 페인트 과정을 거치지 않고 컴포지팅 단계에서만 처리됩니다.
- CSS 애니메이션에
6. 컴포지팅(Compositing)
- 브라우저가 화면에 그릴 요소들의 레이어를 각각 분리한 뒤 결합하여 최종 화면을 구성합니다. GPU가 각 레이어를 합성(Compositing)하여 실제 픽셀 단위의 화면을 만듭니다.
마치며
브라우저 구조에 대해 공부하고 렌더링 과정을 시각화하고 정리하면서,
내가 작성하는 코드 한 줄이 브라우저 내부에서 어떻게 흘러가는지 조금 더 명확히 이해할 수 있게 되었습니다.
앞으로는 코드를 작성할 때 단순히 결과만 보는 것이 아니라,
“이 코드가 브라우저 안에서 어떻게 동작할까?” 를 한 번쯤 떠올려보는 습관을 가져보려 합니다!
참고자료
https://www.youtube.com/watch?v=z1Jj7Xg-TkU&t=284s
https://developer.mozilla.org/ko/docs/Web/Performance/Guides/How_browsers_work
https://ko.wikipedia.org/wiki/웹_브라우저
https://web.dev/articles/howbrowserswork?hl=ko
https://www.youtube.com/watch?v=HgEZ07U_OSc
