브라우저 렌더링 과정을 이해하기 위해서
먼저 웹 브라우저의 구조를 알아야한다.
사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버튼)
브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 연결하는 것
렌더링 엔진: HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 것
통신: 네트워크 요청을 수행
UI 백엔드: 기본적인 위젯을 그려주는 것
JS엔진: 자바스크립트 코드를 실행하는 인터프리터
자료 저장소: 로컬 스토리지나 쿠키같은 보조기억장치에 데이터를 저장하는 파트
여기서 우리는 렌더링 엔진에 대해서 이야기할것이다.
렌더링 엔진의 목표
1. HTML,CSS,JS,이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다.
2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.
(업데이트: 사용자 동작으로 인한 입력, 애니메이션동작, 비동기 요청에의한 데이터로딩)
렌더링 엔진의 동작과정을 알아보자
먼저 순서 요약
1. HTML을 DOM으로 => DOM TREE 생성
2. CSS를 CSSOM으로 => CSSOM TREE 생성
3. 둘이 합쳐서 렌더 트리 생성
4. 레이아웃 (계산 단계)
5. 페인트 (색칠 단계)
6. 합성 (색칠한거 합치기)
1. DOM TREE 생성
사용자가 요청한 HTML 문서를 불러오고 파싱을 한다.
콘텐츠 트리 내부에서 HTML태그들을 DOM 노드로 변환을 시킨다. 그리고 이 노드들을 연결시켜서 DOM트리를 만든다.
2. CSSOM TREE 생성
CSS도 DOM 트리처럼 CSSOM 트리를 만든다.
3. 렌더트리 생성
그러고나면 렌더링엔진이 DOM트리와 CSSOM트리를 합쳐서 렌더트리를 만든다.
렌더트리가 만들어지는과정
Document 부터 각 노드들을 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다.
그러면서 렌더와 관련되 요소들은 렌더트리에 포함을 시킨다.
이럴때 메타 태그나 Display: none 같은 태그는 필요없기때문에 렌더트리에 포함시키지 않는다.
근데 브라우저마자 조금씩 다르게 생성되긴함
4. 레이아웃 (계산단계)
뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정이다.
박스모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 스타일 속성이 계산된다.
이때 CSS에서 %나 em같은 상대적인 단위를 사용했을때, 기계의 뷰포트에서 맞춰서 픽셀단위로 변환된다.
5. 페인트 과정 (색칠)
레이아웃과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 어떻게 보여줄지 알게되면 화면에 실제 픽셀로 그려지도록 변환하느 과정을 거치는데 이것이 바로 페인트 과정이다.
이 과정에서 렌더트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀로 그려진다.
번외 과정 !!
사용자 동작으로 JS가 실행되어서 CSS가 변경되거나 애니메이션 재싱이 일어났을 경우
크게 3가지 경우가 있다.
1. 레이아웃이 다시 발생하는 경우
이때 레이아웃 수치를 다시 계산해서 배치해야하기 때문에 다시 발생하는거임. 마지막엔 레이어 합성과정까지 거침
2. Paint부터 다시 발생 하는 경우
레이아웃 수치를 변화시키지 않는 스타일의 변경이 일어났을때 발생. => 레이아웃 과정이 발생하지 않기 때문에 성능상 이점이 있다.
3. 레이어의 합성만 다시 발생하는 경우
레이어의 경우 정해진 기준에 의해서 레이어를 만들고 페인팅할 영역을 나누어 놓는다.
렌더트리에 있는 노드객체들은 생성된 객체들은 생성된 레이어에 포함된다.
레이어들은 트리형태로 구성된다. 렌더링 엔진이 각 레이어를 프린팅 과정에서 각각 그려준다음에 하나의 비트맵으로 합성해서 페이지를 완성한다. 이떈 레이아웃과 페인팅 모두 수행하지 않기 때문에 성능상 가장 큰 이점이 있다.
참고자료 : https://youtu.be/sJ14cWjrNis
'CS지식' 카테고리의 다른 글
| CSR과 SSR 차이를(feat.SPA&MPA).araboja (0) | 2023.01.31 |
|---|