웹브라우저의 렌더링 과정

2025.10.30 - [HTML] - 구름 딥다이브 프론트엔드 2일차 - 웹접근성

2025.10.30 - [HTML] - 구름 딥다이브 프론트엔드 2일차 - 웹브라우저 렌더링과정  👈

---

이전 포스트에 뒤이어 웹브라우저 렌더링과정에 대해 알아보고자 한다

렌더링 이라고 하면 좀 어려울수있으니까 동작 과정이라고 하겠다.

예시로 아까처럼 쿠팡을 들어보자

나는 쿠팡에 들어가려고 하는 유저다.

1. 내가(=클라이언트) 쿠팡 주소를 검색창(브라우저)에 입력해 엔터를 친다.

2. DNS에서 www.coupang.com 이라는 도메인(이름)을 찾아 IP주소로 변경한다. 

- 마치 전화를 하려는데 전화번호부를 찾는것과 같다.

3. 서버에서 HTTP을 요청(Reqeust)해 나에게 쿠팡웹사이트을 응답(Response)할 준비를 한다.

- HTTP란 나(클라이언트)와 컴퓨터(서버)가 통신하기위한 규격이며 뒤에 Secure의 S가 붙으면 암호화된 데이터란 뜻이다!

3-1. 쿠팡 메인에는 상품 DB 등 다양한 정보가 포함되어 있기 때문에, 페이지를 구성하는 동안 여러 API 호출도 함께 발생한다.

 

4. 렌더링 과정

클로드에게 부탁해서 그린 렌더트리 과정- DOM(돔)과 CSSOM(쏨)을 합치면 렌더트리가 된다!

4-1. 내 브라우저에 쿠팡을 그리기 위해 먼저 HTML을 그린다. 이를 HTML을 파싱해 DOM 트리를 만든다고 말한다.

4-2. 그다음 CSS를 불러와 CSSOM 트리를 만든다.

4-3. DOM과 CSSOM을 합쳐 렌더트리를 만든다.

 

4-4. 각 요소 위치를 잡기위해 Layout을 그리고 이를 화면에 그려내기위해 Paint 과정에 들어간다.
4-5. JS 코드로 인해 요소의 크기나 위치가 변하면 브라우저는 레이아웃을 다시 계산하는 Reflow 과정을 거친다.

4-6. 그리고 수정된 화면을 다시 그리기위해 Repaint에 들어간다.

💡 여기서 명심해야할것은 항상 reflow에서 repaint 과정을 거치는것은 아니다.
어떤 요소가 수정되냐에 따라 reflow만 실행될수도, 아님 둘다 실행하지않고 바로 최종합성단계로 넘어갈수도 있다.

 

4-7. 최종적으로 합성해 Composite 쿠팡 메인 최종화면을 내가 볼수있게 된다.

 

 

 

...휴 길었다. 아무튼 생각보다 우리가 웹페이지 하나를 보는데에는 생각보다 많은 연산이 필요하다.

그래서 이 복잡한 렌더링 과정을 최적화 시키는 방법이 중요하다!

1. Reflow와 Repaint 과정을 줄인다

설명한대로 이 두과정은 필수적이지 않다.
빈번하게 발생되면 속도저하를 일으킬수있기때문에 최대한 스타일변경을 최소화 하는것이 좋다.

 

2. 이미지 최적화

큰 이미지일수록 당연히 용량이 크다. 그럼 당연히 렌더링도 느려지겠지.

이럴때 img태그에 loading속성으로 lazy를 쓰면좋다.

lazy는 이미지를 한꺼번에 불러오지 않고, 사용자가 실제로 화면에서 볼 때 그때 로딩하는 기술이다.

<img src="example.jpg" alt="Example Image" loading="lazy">

 

3. 다양한 웹도구를 사용해보기 (또 Lighthouse)

페이지가 로드되고 시작한 시점부터 페이지의 콘텐츠가 렌더링될때까지 걸린시간을
고오급지게 말하면 FCP (First Contentful Paint) 라고 하는데 평균적으로 3초 안에 FCP가 수행되지않으면
렌더링이 느리다고 이야기한다고 한다.

앞서 소개한 Lighthouse는 페이지 성능을 진단하는 도구로, FCP 외에도 LCP, CLS, TBT 등 다양한 렌더링 지표를 분석해주니,

이글을 보는 분들은 꼬옥 설치해서 사용해보시길...✨

 

 

 

 

참고자료
https://yozm.wishket.com/magazine/detail/2909/

브라우저가 화면을 그리는 방법, 렌더링 과정 이해하기 | 요즘IT

 

https://hooninedev.com/240329/

후니네 개발하우스 | 👉 클릭해봐! 너도 브라우저 렌더링에 100점짜리 대답을 할 수 있어!!

https://developerhia.tistory.com/56

브라우저 렌더링 엔진 동작과정 + 웹페이지 속도 최적화

https://velog.io/@bumsu0211/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95%EA%B3%BC-%EC%B5%9C%EC%A0%81%ED%99%94#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%B5%9C%EC%A0%81%ED%99%94

브라우저 렌더링 과정과 최적화