브라우저의 렌더링 원리에 대해 설명해주세요.
면접용
브라우저 렌더링은 웹 페이지를 화면에 표시하는 과정입니다. 이는 크게 4단계로 나눌 수 있는데요, 스타일 계산, 레이아웃, 페인트, 그리고 합성 과정으로 이루어집니다.
첫 번째 단계는 스타일(Style) 입니다. 브라우저는 HTML을 분석해 DOM 트리를 만들고, CSS를 분석해 CSSOM 트리를 만든 후, 둘을 결합하여 렌더 트리를 생성합니다.
다음은 레이아웃(Layout) 단계입니다. 브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산합니다.
세 번째는 페인트(Paint) 단계입니다. 이 단계에서는 요소의 스타일 속성을 바탕으로 실제 픽셀을 화면에 그립니다.
마지막은 합성(Compositing) 입니다. 분리된 레이어들을 올바른 순서와 위치로 조합해 최종 화면을 구성하는 단계입니다. 여기서 레이어의 위치나 투명도 등을 고려해 화면에 표시됩니다.
결론적으로, 브라우저는 이전 단계에서 만들어진 DOM과 CSSOM을 기반으로 이 네 가지 단계를 통해 렌더링을 진행하며, 그 결과로 사용자의 화면에 웹페이지가 나타나고 상호작용할 수 있게 됩니다.
개념설명
개요 : 브라우저 동작 원리, 왜 알아야 하는가?
사용자는 로딩이 빠르고 상호작용이 원활한 웹 경험을 원합니다. 이를 위해 웹 성능을 높일 수 있는 방법은 크게 2개입니다.
네트워크 지연시간 줄이기
브라우저 렌더링 시간 줄이기
1. 네트워크 지연시간 줄이기
네트워크 지연시간은 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간을 뜻합니다. 시간을 줄이기 위해서는 최대한 빠르게 요청해야 하고, 이를 통해 페이지 로드를 빠르게 할 수 있습니다. ⇒ 웹 최적화
2. 브라우저 렌더링 시간 줄이기
브라우저는 멀티 스레드를 지원합니다. 크게는 메인 스레드와 그 이외 스레드로 나눌 수 있습니다.
이외의 스레드 : 렌더링 엔진, worker 스레드, 네트워크 스레드, I/O 스레드, GPU 스레드 등
➕스레드(thread)란?
스레드를 설명하기 위해 먼저 프로세스(process)에 대해 알아야 합니다.
프로세스는 운영체제에 의해 메모리 공간을 할당받아 실행중인 프로그램을 뜻합니다.
쉽게 말해서 실행중인 프로그램입니다.
프로세스는 자원(프로그램에 사용되는 데이터, 메모리 등) + 스레드로 구성됩니다.
즉, 스레드는 프로세스의 일부이며, 프로세스에서 실제로 작업을 수행하는 주체를 의미합니다. 모든 프로세스는 1개 이상의 스레드를 갖고 있으며, 2개 이상의 스레드를 가지면 멀티 스레드 프로세스라고 합니다.
메인 스레드는 브라우저의 핵심 작업을 담당하는 싱글 스레드입니다. 메인 스레드는 요청된 모든 작업을 수행하고, 유저와의 상호작용에 빠르게 반응할 수 있어야 합니다.
담당 기능 : js 파일 실행, DOM과 CSSOM 조작, 렌더링 작업 수행 등
메인 스레드의 책임을 줄여준다면 웹 성능을 향상시킬 수 있습니다. 앞서 설명했듯이, 메인 스레드는 싱글 스레드라 한 번에 하나의 작업만 가능합니다. 만약 js 실행이 오래 걸리거나 계산이 복잡하다면 다른 작업을 할 수 없습니다. 결국 브라우저가 DOM 업데이트나 화면 렌더링을 늦추게 됩니다.
메인 스레드의 책임을 줄이기 위해서는 다음과 같은 방법을 사용할 수 있습니다.
비동기 작업: Web Workers, Service Workers를 사용해 복잡한 작업을 처리합니다.Debouning과 Throttling: 반복적으로 발생하는 사용자 입력 이벤트를 처리할 때 적용한다면 이벤트 발생 빈도를 줄일 수 있습니다.js 코드 최적화: 불필요한 동기 코드를 없애고, Code Splitting을 사용해 필요한 부분만 로드합니다.Code Splitting 방법 : React.lazy(), Suspense, Dynamic import 등
CSS와 애니메이션 최적화: 복잡한 레이아웃 변경을 줄이고, 애니메이션은 GPU로 처리할 수 있는 속성(transform, opacity)를 사용합니다.브라우저 최적화 도구: Chrome 개발자도구의 Performance 탭을 통해 개선 사항을 파악합니다.
브라우저 동작 순서
브라우저의 동작 순서는 다음과 같이 크게 5단계로 나눌 수 있습니다.
탐색(Navigation) : 웹페이지를 로딩하는 단계로, 웹페이지를 탐색하고 서버에 요청을 보냅니다.
응답(Response) : 서버가 요청을 받고, 응답으로 HTML의 내용을 보냅니다.
구문 분석(Parsing) : 브라우저가 HTML을 분석하여 DOM과 CSSOM 트리를 구축하는 단계입니다.
렌더(Render) : DOM과 CSSOM 트리가 렌더 트리로 합성되고, 레이아웃과 페인팅 과정이 실행됩니다.
상호작용(Interactivity) : 사용자가 페이지와 상호작용할 수 있는 상태이며, 사용자 이벤트(이벤트 리스너)를 통해 DOM 조작이나 스타일 변경이 이루어질 수 있습니다.
이번 문서의 주제는 브라우저 렌더링이므로, 다른 동작은 다른 문서에서 추가적으로 설명하도록 하겠습니다.
브라우저의 렌더링 과정
이 진행됩니다.
위의 작업은 대부분 브라우저의 메인 스레드에서 수행됩니다. 따라서 UI 응답성을 유지하기 위해 빠르게 진행해야 합니다.
파싱 이후의 렌더링 과정은 다음의 4단계로 이루어집니다.
1. 스타일(Style)
파싱 과정에서 만들어진 DOM과 CSSOM 트리를 합쳐 렌더 트리를 만드는 과정입니다. 렌더 트리는 DOM 트리의 루트 노드부터 시작해 아래 노드까지 순차적으로 만들어집니다.
노드는 CSSOM에서 정의된 CSS에 의해 스타일이 적용됩니다. 각 노드에는 해당 노드에 적용된 CSS 규칙이 연결되며, 여러 규칙이 충돌할 경우 CSS Cascade 규칙에 따라 최종 스타일이 결정됩니다.
➕Cascading이란?
Cascading은 CSS(Cascading Style Sheet)에도 들어 있는 단어입니다. CSS가 요소에 적용하려는 스타일의 우선순위를 정하는데 사용하는 알고리즘을 뜻합니다. 우선순위는 3가지를 고려하여 결정됩니다.
중요도: 작성자 스타일 시트(개발자 스타일 코드) > 사용자 스타일 시트(브라우저에서 사용자가 직접 정의한 스타일) > 사용자 도구 스타일 시트(브라우저 기본 스타일)
명시도: 인라인 > id > class > 태그
코드 순서: 가장 마지막에 작성한 속성을 최우선으로 적용(절차지향)
렌더 트리는 화면에 실제로 보이는 요소들만 포함하기 때문에, 특정 노드들은 렌더 트리에 포함되지 않습니다.
<head>노드와 그 자식 노드display: none스타일 속성을 가진 노드 등단,
visibility: hidden속성을 가진 요소는 자리를 차지하기 때문에 렌더 트리에 포함됨!
script노드
2. 레이아웃(Layout)
렌더 트리를 기반으로 각 노드의 도형 값을 계산하여 페이지에 그려질 위치와 좌표를 알아가는 과정입니다. 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하고, 페이지에서 나타날 각 객체의 크기와 위치를 계산합니다.
계산 과정에는 다음과 같은 특징들이 있습니다.
브라우저는 노드를
CSS 박스 모델(padding, border, margin, content로 이루어진 box)로 계산합니다.뷰포트를 기준으로 레이아웃을 계산합니다.
일반적으로 태그로부터 시작해 모든 자식 노드를 순차적으로 계산합니다.
초기 렌더링 시 크기가 명시적으로 주어지지 않은 요소(이미지 등)를 위해 임시 공간(placeholder)을 미리 확보합니다.
레이아웃은 실행 시점을 기준으로 좀 더 세분화할 수 있습니다.
레이아웃
브라우저가 첫 렌더링 시 실행
처음 노드의 사이즈와 위치가 결정됨 (위의 내용 전부 레이아웃 과정에 해당됨)
리플로우(Reflow)
초기 렌더링 후 DOM, CSSOM이 변경될 때 실행
브라우저가 요소의 크기나 위치를 다시 계산해야 할 때 발생
ex) 창 크기 변경, 이미지가 로드되어 실제 크기가 결정될 경우 등
3. 페인트(Paint)
페인트 과정에서는 각 노드를 화면에 나타냅니다. 레이아웃 단계에서 계산한 각 노드 박스를 실제 화면의 픽셀로 변환하고, 모든 시각적인 부분을 화면에 그리는 작업입니다.
페인팅은 레이아웃 트리의 요소를 레이어로 분리할 수 있습니다. 다음 방법을 사용하면 분리가 가능합니다.
<video>,<canvas>등의 태그 사용opacity, 3D transform, will-change 등의 스타일 속성 사용
레이어를 분리하면 다음과 같은 장단점이 있습니다.
장점레이어를 분리하면 변경 시 해당 레이어만 다시 그리면 되기 때문에 리페인트(Repaint)를 최소화할 수 있습니다.
CPU의 메인 스레드가 아닌 GPU를 사용해 렌더링하기 때문에 그래픽 처리 성능을 올립니다.
단점레이어를 과도하게 생성하면 메모리 부족 문제가 발생할 수 있습니다.
4. 합성(Compositing)
분리한 레이어는 각각 독립적으로 페인팅됩니다. 합성 과정은 이러한 레이어들을 올바른 순서(z-index 등)에 따라 겹쳐 하나의 최종 화면을 구성하는 과정입니다. 모든 레이어의 위치, 투명도, 크기 등을 조합하여 최종적으로 디스플레이에 그립니다.
참고 문서
Last updated