웹 브라우저란 웹에서 정보를 탐색하고 HTML 문서, 이미지 등 여러 콘텐츠를 우리에게 표현해주는 소프트웨어로 구글 크롬(Chrome), 애플의 사파리(Safari), 마이크로소프트의 엣지(Microsoft Edge) 등이 있습니다.
브라우저의 주요기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시합니다.
브라우저의 기본 구조
브라우저의 기본 구조
1) 사용자 인터페이스(User Interface)
사용자 인터페이스는 검색창, 뒤로가기/ 앞으로 가기 버튼, 새로 고침 버튼 등 브라우저 프로그램 자체의 GUI를 구성하는 부분이다.
2) 브라우저 엔진(Broswer Engine)
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
3) 렌더링 엔진(Rendering Engine)
요청한 콘텐츠(HTML/CSS를 파싱(parsing)하여 표시한다.
4) 통신(Networking)
HTTP 요청과 같은 네트워크 호출에 사용된다.
5) 자바스크립트 엔진(JavaScript Engine)
자바스크립트 코드를 해석하고 실행한다.
6) UI 백엔드(UI Backend)
기본적인 위젯을 그리는 인터페이스로 플랫폼에서 명시하지 않은 일반적인 인터페이스
7) 데이터 저장소(Data Storage)
로컬 스토리지, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역
브라우저의 주요 엔진
웹 브라우저에는 두 개의 엔진이 있습니다.
렌더링 엔진 : 요청한 콘텐츠(HTML/CSS를 파싱(parsing)하여 표시한다.
자바스크립트 엔진 : 자바스크립트 코드를 해석하고 실행한다.
렌더링 엔진(Rendering Engine)
렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일로 HTML 문서와 같은 콘텐츠를 표시해줍니다.
대표적인 렌더링 엔진으로는 크롬의 크롬미엄(Chromium), 사파리의 웹킷(Webkit)이 있습니다.
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작합니다.
다음은 렌더링 엔진의 기본동작은 이러합니다.
렌더링 엔진의 동작과정
1. 렌더링 엔진이 전달받은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
3.DOM 트리와 파싱 된 스타일 요소를 합쳐 렌더 트리를 구축한다.
4. 렌더 트리의 각 노드에 대해 화면 어디에 배치할지 결정한다.
5. UI 백엔드에서 렌더 트리를 각 노드를 그린다.
브라우저 렌더링 동작 과정
1. 브라우저가 서버로부터 HTML 문서를 모두 전달 받는다. (Loader가 서버로부터 HTML을 불러옴)
2. 렌더링 엔진은 전달 받은 HTML 문서를 파싱하여 DOM 트리를 구축한다.
3. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만든다. (CSS Object Model) CSSOM은 DOM이어떻게화면에 표시될 지를 알려주는 역할을 한다.
4. DOM 트리와 CSSOM 트리를 합쳐 렌더 트리(Render Tree)를 구축한다.
렌더 트리는 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리이다.
(DOM 트리의 최상단인 document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다. 그러면서 렌더와 관련된 요소들을 렌더 트리에 포함시킨다.
이 때, meta 태그나display: none;속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더 트리에 포함되지 않는다.)
5. 렌더 트리의 요소들의 크기와 위치를 계산한다.
6. 계산된 크기와 위치에 맞게 화면에 출력한다. Layout - Paint - Composite의 세 단계로 이루어진다.
렌더링 트리 생성 과정
1. DOM(Document Object Model)
DOM 객체를 구성하는 과정
1. 변환 : HTML 코드가 있으면 렌더링 엔진은 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 개별 문자로 변환한다.
2. 토큰화 : 개별 문자로 변환된 것을 HTML5 표준으로 지정된 고유 토큰으로 변환한다. 각 토큰은 고유한 의미와 규칙을 가진다.
3. DOM 생성 : 마지막으로 HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결된다. 이 트리 데이터 구조에는 마크업에 정의된 상위-하위 관계를 포함한다. (ex: HTML 객체는 body 객체의 상위라는 관계다.)
이렇게 구성된 DOM 트리는 HTML 문서 마크업의 속성과 각 노드의 관계에 대한 정보를 가지고 있지만, 아직 이 요소들이 렌더링 될 때 어떻게 표시할지에 대해서는 알 수가 없다. 이는 CSSOM의 역할이다.
2. CSSOM(CSS Object Model)
CSSOM 객체를 구성하는 과정
- 브라우저는 DOM 생성하는 동안 CSS 스타일시트 링크 태그를 접하고 리소스에 대해 요청한다.
- HTML을 DOM 트리로 만든 것처럼, CSS도 브라우저가 이해하고 처리할 수 있도록 변환해줘야 한다. HTML과 같은 과정을 반복한다.
3. Render Tree
Render Tree: 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리
Reder Tree
- DOM, CSSOM 결합되어 형성
- 페이지를 렌더링하는 데 필요한 노드만 포함
- display: none 속성은 요소가 보이지 않으며 레이아웃에 포함되지 않도록 렌더링 트리에서 요소 완전 제거
- visibility: hidden 속성은 요소를 보이지 않게 만들지만, 여전히 레이아웃에서 공간을 차지(비어있는 상자로 렌더링)
- 최종 출력은 화면에 표시되는 모든 노드의 콘텐츠, 스타일 정보를 모두 포함하는 렌더링 트리. 렌더링 트리가 생성되었으므로 레이아웃 단계로 진행할 수 있다.
4. Layout - Paint - Composite
1) Layout 과정
- 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정.
- 박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 그리고 이외의 스타일 속성이 계산된다. 이 때, CSS에서%나em같은 상대적인 단위를 사용했을 때에는 뷰포트에 맞춰서 픽셀 단위로 변환된다.
- 레이아웃의 높이, 너비, 그리고 위치 등에 변화 그리고 DOM이 추가되거나 삭제되면Reflow가 일어난다.(즉, Layout 과정이 다시 발생하는 경우를Reflow라고 한다.)
- Reflow는 위의 그림에서 보이는 부분을 모두 수행해야하며 다른 모든 노드의 위치를 다시 계산하고 영향을 받은 부분을 찾아내어 다시 Paint한다.
🤔Reflow (다시 Layout)이 발생하는 경우 - DOM 노드의 추가, 제거 / DOM 노드의 위치 변경 - DOM 노드의 크기 변경(margin, padding, border, width, height 등..) - CSS3 애니메이션과 트랜지션 - 폰트 변경, 텍스트 내용 변경 - 이미지 크기 변경 - offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청 - 페이지 초기 렌더링 - 윈도우 리사이징
2) Paint 과정
- 위의 Layout 과정에서 렌더링 엔진이 각 요소들이 계산이 끝나면 마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데, 이것이 바로 Paint 과정이다.
- 이 과정에서 렌더 트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀로 그려진다.
위의 Reflow와 비슷하게 Repaint 상황도 있는데, Repaint가 되는 경우를 알아보자.
Repaint가 발생하는 경우 주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생이와 같은 경우는 Layout 과정이 발생하지 않기 때문에 성능상으로 좀 더 이점을 가진다.
3) Composite(합성) 과정
레이어(Layer)란, 포토샵의 레이어와 비슷하게 페인팅 할 영역을 나누어 놓는 것을 의미하는데, 크롬의 경우에는 Layout 과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 레이어를 생성한다.
그리고 렌더 트리에 있는 노드 객체들은 생성된 레이어에 포함되게 된다. 이 레이어들은 트리 형태로 구성되며, 렌더링 엔진이 각 레이어를 프린팅 과정에서 각각 그려 준 다음에 하나의 비트맵으로 합성해서 페이지를 완성한다.
레이어의 합성만 다시 발생하는 경우 Layout과 Paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가짐
