브라우저란?
브라우저란 무엇일까? 브라우저란 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어다. 흔히 우리가 인터넷에 접속할 때 사용하는 크롬, 사파리, 엣지 , 파이어폭스 등이 바로 브라우저다.
브라우저는 서버로부터 데이터를 전송받으며 렌더링 엔진을 사용해 이를 텍스트 및 이미지 등으로 변환시킨다. 이러한 데이터들은 HTML 코드로 작성되어 있으며, 브라우저는 이러한 HTML 코드를 읽어 사용자에게 화면을 표시하는 역할을 한다.
렌더링 과정
렌더링의 기본적인 과정은 다음과 같다.
1. DOM 트리 생성
문서 객체 모델(The Document Object Model)은 HTML 이나 XML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소들을 정의하고, 각각의 요소에 접근하는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.
HTML 파일과 css 파일을 파싱하여 각각의 Tree를 만든다.
브라우저가 페이지를 렌더링하려면 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩에 따라 개별 문자로 변환한다.
2. CSSOM 트리 생성
객체 모델(CSS Object Model)은 브라우저 상에 표현할 때 브라우저가 렌더링 엔진을 통해 파싱 하는데 이 때 두 가지 요소를 파싱하는데 하나는 HTML 다른 하나는 CSS이다.
이때 HTML을 파싱하여 자료 구조화 한것을 DOM, CSS을 파싱하여 자료구조화한 것을 CSSOM이라 한다.
DOM 트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성한다.
<이러한 과정을 거친 CSSOM(CSS Object Model 트리구조>
3. 렌더링 트리(Rendering Tree) 생성
DOM 트리와 CSSOM 트리가 만들어지면, 이 두 가지 트리를 결합하여 렌더링 트리를 생성한다. 이때 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다.
4. 레이아웃(Layout)단계
레이아웃 단계에서는 Render Tree를 화면에 어떻게 배치해야 할지를 노드의 정확한 위치와 크기를 계산한다. 모든 상대적인 측정값은 화면에서의 절대적인 픽셀로 변환된다.
5. 페인팅(Paint) 단계
마지막 paint 단계에서는 Layout단계에서 계산되었던 값을 이용하여 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이 단계를 "페인팅" 또는 "래스터화"라고 한다.
<리플로우, 리페인트>
리플로우=레이아웃 계산을 다시하는 것
리페인트=새로운 렌더트리를 바탕으로 다시 페인트를 하는 것
Reflow 과정이 일어나는 상황
- 노드의 추가 및 제거
- 요소의 위치 & 크기 변경
- 페이지 초기 렌더링
- 윈도우 리사이징
- 내용 변화
Reflow, Repaint 최소화
리플로우와 리페인트를 완전히 피할 수는 없다. 하지만 이것을 최적화햐여 줄이는게 현명하다고 할 수 있다.
- DOM 사용을 최소화하여 Reflow 비용 줄이기
- 인라인 스타일을 자제하라
- 퀄리티와 퍼포먼스를 타협
- CSS에서의 JS표현식 자제 (문서중 일부가 Reflow될 때마다 표현식이 다시 계산되기 때문이다.)
- CSS 하위선택자는 필요한 만큼만 정리하라
- 테이블로 구성된 레이아웃 자제(작은 변화도 테이블 전체 노드가 리플로우 발생)
