[HTML/CSS] 브라우저 렌더링

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

 

브라우저 엔더링

렌더링

• HTML, CSS, Javascript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미합니다.

브라우저는 모두 다른 특징을 갖고 있지만 기본적으로 렌더링을 수행하는 렌더링 엔진을 갖는다는 공통점이 있습니다.

브라우저 렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속합니다
2. 브라우저가 서버로 부터 HTML, CSS, JS와 같은 웹 사이트에 필요한 리소스를 다운 받습니다.
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱해 DOM트리를 만듭니다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM트리를 만듭니다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render트리를 구축합니다.
6. 레이아웃과정을 통해 각 요소를 어디에 배치해야할 지 결정합니다
7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render트리를 화면에 그리기 시작합니다 이 과정을 paint라고 합니다.

파싱

파싱이란 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계입니다.

문서파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미합니다.

렌더링 과정에서 HTML파일을 바탕으로 DOM트리를 구축하고 CSS파일로 CSSOM츠리를 만드는 것을 파싱했다 할 수 있습니다.

렌더 트리

DOM트리, CSSOM트리 처럼 트리 구조입니다.

DOM트리 CSSOM트리는 서로 다른 속성을 가진 독립적인 트리이기 때문에 이들을 합쳐주는 과정이 필요하다

레이아웃

브라우저에서 레이아웃은 렌더트리르 기반으로 HTLM요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정이다

페인팅

레이아웃 단계에서 결정된 대로 그림을 그리기 시작합니다.

리플로우와 리페인트

사용자가 브라우저 화면을 늘리거나 줄이는 등의 크기를 조정한거나, 다른 사이트로 이동을 하는 등 화면에 요소가 추가되거나 삭제, 혹은 아예 다른 요소들을 불러와야 하는 상황이 생기면 당연히 화면에 있던 요소들의 크기가 바뀌게 됩니다.

이렇게 어떤 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.

 

리플로우와 리페인트는 피할 수 없습니다. 하지만 남발할 경우 속도 저하등 유저에게 나쁜 UX를 제공할 수 있습니다.

그렇기 때문에 최적화를 해야합니다.