웹페이지 렌더링

브라우저가 html 파일을 화면에 그려내는 과정

1. 웹페이지 렌더링의 과정

1. 파싱

브라우저는 우선 html 파일을 DOM 으로 변환(파싱) 함.

참고 ) html의 개행은 text로 표시 예를들어 body 태그 안에 div 태그가 들어있다면 body,text,div 와 같이 콘솔창에 출력됨

---

2. 스타일 계산

CSS 역시 파싱하여 CSSOM으로 변환함.

---

3. 레이아웃

CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)를 생성함

---

4. 페인트

레이아웃 트리(렌더 트리) 가 생성되면 이 트리를 따라 페인트 기록이 생성 됨.

---

5. 컴포지팅

각각의 레이어를 스크린에 픽셀로 표현하고 나누었던 레이어들을 합성해 페이지를 그림

2. page reflow & repaint

브라우저는 html 구조상의 변화 혹은 스타일의 변화가 왔을 때 reflow,repaint 라는 과정을 거침.

- reflow : 레이아웃 (너비,높이 등) 변경 시 영향 받는 모든 노드 (자식, 부모)의 수치를 다시 계산하여 렌터 드리를 재생성하는 작업 즉, 앞서 말한 3번의 과정부터 다시 수행

- repaint : reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 스타일 변경시에는 reflow 과정을 생략한 repaint 작업만 수행함 즉, 앞서 말한 4번의 과정부터 수행

정리 : html을 변경시 3번부터 진행 단, 스타일만 변경시에는 reflow 과정을 생략하고 repaint작업만 수행함.

3. 레이아웃이 바뀌는 애니메이션

레이아웃이 바뀌는 애니메이션을 구현하면 브라우저는 매 프레임마다 reflow, repaint 과정을 수행하는데 이 과정은 브라우저에 상당한 부담이 됨.

이때 브라우저의 부담을 덜기 위해서 GPU(graphic processing unit)를 이용한 그래픽 가속능력을 사용할 수 있는데 이러한 능력을 지원하는 css 속성이 transform이다.

결론 : 정적인 사이트에서 요소의 위치를 단순 배치하는 것은 position을 사용해도 괜찮지만 애니메이션이나 혹은 동적으로 요소의 위치를 이동해야 하는 경우 transform의 속성을 사용하는 것이 성능(GPU를 이용하기 때문)에 좋음.