[임시] JavaScript로 프레임워크 만들기 1 - 웹 브라우저 렌더링

렌더링이란 무엇인가요?

렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.

 

보통 웹 브라우저는 크게 두가지 엔진을 가지고 있습니다.

하나는 자바스크립트 엔진이고,

나머지 하나는 렌더링 엔진 입니다.

그렇다면 렌더링은 어떻게 진행될까요?

 

렌더링 과정은 어떻게 되나요?

1. 웹 브라우저는 로컬 DNS 캐시를 확인하여 해당 도메인 주소와 대응하는 IP 주소를 확인합니다
2. 로컬 DNS 캐시에 없을 경우, 웹 브라우저는 DNS 서버에 도메인 주소의 IP 주소를 요청합니다
3. DNS 서버가 웹 브라우저에게 찾는 사이트의 IP 주소를 응답합니다
4. 웹 브라우저가 웹 서버에게 IP 주소를 이용하여 HTTP 요청을 보내 HTML 문서를 요청합니다
5. 웹 애플리케이션 서버(WAS)와 데이터베이스에서 웹 페이지 작업을 처리합니다
6. 위의 작업 처리 결과를 웹 서버로 전송합니다
7. 웹 서버는 웹 브라우저에게 HTML 문서 결과를 응답합니다
8. 웹 브라우저는 받은 HTML과 CSS를 파싱하여 웹 페이지를 렌더링하여 화면에 출력합니다

 

HTML, CSS 파싱 후 렌더링 되는 과정

1. DOM Tree 생성 (HTML 파싱을 통해 생성됨)
2. CSSOM Tree 생성 (CSS 파싱을 통해 CSSOM Tree 생성됨)
3. 렌더 트리 생성 (DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성) -> 이 곳부터 display:none이 적용된 요소는 렌더 트리에 포함되지 않음
4. 레이아웃(Reflow) : 렌더 트리 기반으로 각 요소의 크기와 위치를 계산
5. 페인트(Repint) : 렌더 트리 기반으로 화면에 요소를 그림
6. 자바스크립트 실행 async(다운로드 후 HTML 파싱), defer (다운로드 + HTML 파싱)
7. 합성과 레이어

 

리렌더링이 되는 조건은 무엇인가요?

리렌더링이 되는 조건은 크게 Reflow, Repaint가 되는 경우라고 볼 수 있습니다.

 

아래의 속성들이 변경되면 Reflow 혹은 Repaint가 발생합니다.

 

리플로우(Reflow)가 일어나는 대표적인 속성들입니다.

position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow

 

리페인트(Repaint)만 일어나는 대표적인 속성들입니다.

background, color, text-decoration, border-style, border-radius

 

마무리

웹 브라우저의 렌더링은 생각보다 복잡한 과정으로 진행됩니다.

하지만 개발자라면 무조건 경험하는 렌더링 최적화를 하기 위해서라면 렌더링 과정을 자세하게 알 필요가 있습니다.

렌더링 과정을 이해하고 렌더링 최적화를 통해 웹/앱의 속도를 향상시켜 봅시다!