[FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항)

🙌 소개

웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느려지거나 멈추는 경우가 발생할 수 있다. 이러한 문제를 해결하기 위해서는 브라우저 렌더링 원리와 성능 최적화 방법을 이해하면 도움이 될 수 있다 판단해 시간을 내어 찾아보았다.

 

🤔 브라우저 렌더링 원리란 무엇인가

브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 원리는 크게 렌더링 엔진, 렌더 트리, 레이아웃, 그리고 페인팅으로 구성된다.

✅ 렌더링 엔진

렌더링 엔진은 웹 페이지를 불러올 때 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱한다. 이때, HTML은 문서 구조를 정의하고, CSS는 문서의 스타일을 정의하며, JavaScript는 문서의 동작을 정의한다.

✅ 렌더 트리

렌더 트리는 렌더링 엔진이 파싱한 HTML, CSS와 같은 웹 페이지의 요소들을 이용하여 구성한 트리 구조다. 이 구조는 브라우저가 화면에 표시할 요소들을 정의한다.

✅ 레이아웃

레이아웃은 렌더 트리를 이용하여 브라우저의 화면에 요소들을 배치하는 과정이다. 이때, 각 요소의 크기, 위치, 간격 등을 계산한다.

✅ 페인팅

페인팅은 레이아웃을 이용하여 계산된 위치에 요소들을 표시하는 과정이다. 이때, 브라우저는 렌더링 엔진에서 계산된 정보를 이용하여 브라우저 화면에 그래픽 요소들을 표시한다.

 

🕋 브라우저 렌더링 순서

브라우저 렌더링은 HTML, CSS, JavaScript 등의 문서를 받아와 웹 페이지를 화면에 그리는 과정이다. 브라우저 렌더링의 순서는 다음과 같다.

1. HTML 파싱

브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. 이 과정에서 브라우저는 HTML 태그의 종류와 속성을 분석하고, 각 태그의 위치를 계산한다.

2. CSS 파싱

브라우저는 CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. 이 과정에서 브라우저는 CSS 선택자와 규칙을 분석하고, 각 규칙의 적용 범위와 우선 순위를 계산한다.

3. 렌더 트리 생성

브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 이 과정에서 브라우저는 레이아웃과 페인팅에 필요한 정보를 추출하고, 숨겨진 요소나 비표시 요소를 필터링한다.

4. 레이아웃

브라우저는 렌더 트리의 각 요소의 위치와 크기를 계산하여 뷰포트 내에서의 정확한 배치를 수행한다. 이 과정에서 브라우저는 브라우저 창의 크기나 스크롤 위치 등의 요소도 고려한다.

5. 페인팅

브라우저는 렌더링된 요소들을 화면에 그린다. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며, 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함된다.

브라우저 렌더링의 이러한 과정은 사용자의 환경, 컴퓨터 사양, 브라우저 종류 등에 따라 속도가 다르게 나타날 수 있다. 따라서 웹 개발자는 이러한 렌더링 과정을 최적화하여 사용자 경험을 개선할 필요가 있다.

 

🔩 렌더링 성능 최적화 방법

웹 페이지를 불러오는 데 걸리는 시간은 사용자 경험을 크게 좌우한다. 따라서, 브라우저 렌더링 성능을 최적화하기 위해서는 다음과 같은 방법을 고려해볼 수 있다.

✅ CSS 및 JavaScript 최적화

CSS와 JavaScript는 웹 페이지의 디자인과 동작을 결정하는데 중요한 역할을 한다. 하지만, CSS와 JavaScript 코드가 지나치게 복잡하거나, 파일 크기가 크면 렌더링 성능을 저하시키는 원인이 된다. 이를 해결하기 위해서는 다음과 같은 방법을 고려해볼 수 있다.

• CSS 코드를 압축하고, 중복된 스타일 코드를 제거한다.
• JavaScript 코드를 압축하고, 불필요한 코드를 제거한다.
• JavaScript 코드를 지연 로딩하거나 비동기 로딩을 이용하여 페이지 로딩 시간을 최적화한다.

 

✅ 이미지 최적화

웹 페이지에서 사용되는 이미지는 렌더링 성능에 큰 영향을 미친다. 따라서, 이미지를 최적화하여 불필요한 로딩 시간을 줄이는 것이 중요하다. 다음과 같은 방법을 고려해볼 수 있다.

• 이미지 포맷을 최적화하여 파일 크기를 줄입니다. 예를 들어, JPEG 포맷은 사진에 적합하고, PNG 포맷은 아이콘과 같은 단순한 그래픽에 적합하다.
• 불필요한 이미지를 제거하거나, CSS 스프라이트 기술을 이용하여 여러 이미지를 하나의 이미지 파일로 통합한다.
• Lazy Loading 기술을 이용하여 페이지 스크롤링에 따라 이미지를 로딩한다.

✅ 레이아웃 최적화

레이아웃은 브라우저에서 웹 페이지의 요소를 배치하는 과정으로, 렌더링 성능에 큰 영향을 미친다. 따라서, 레이아웃 최적화는 렌더링 성능을 향상시키는 중요한 방법이다. 다음과 같은 방법을 고려해볼 수 있다.

• CSS Flexbox 또는 CSS Grid를 이용하여 요소를 배치한다.
• 요소의 크기와 위치를 계산할 때, 불필요한 계산을 줄이는 최적화 기술을 이용한다.
• 불필요한 CSS 요소를 제거하거나, CSS 속성을 줄인다.

✨ 결론

웹 페이지의 렌더링 성능을 최적화하는 것은 사용자 경험을 개선하는 중요한 요소다.

렌더링 엔진, 렌더 트리, 레이아웃, 페인팅 등의 개념을 이해하고, CSS와 JavaScript, 이미지, 레이아웃 등을 최적화하는 방법을 적용하여 렌더링 성능을 향상시킬 수 있는 것을 확인했다. 이를 통해 사용자 경험을 개선하고, 웹 페이지의 성능을 향상시키도록 노력해 나가야 겠다.