웹 브라우저 렌더링 개념 - position transform 속성 차이

position transform 속성 차이

position 속성과 transform 속성은 둘 다 요소의 위치와 관련된 속성이다. 두 속성을 언제 사용하는 게 좋은지를 알아보기 위해서는 우선 웹 브라우저 렌더링 개념에 대한 이해가 필요하다.

 

 

웹 브라우저 렌더링이란?

웹 페이지는 미리 만들어진 것을 가져오는 게 아니라 실시간으로 그려낸다. 실시간으로 웹사이트가 그려지는 과정을 웹 브라우저의 렌더링 과정이라고 한다. 웹 브라우저 안에는 두 개의 엔진이 들어가 있는데, 하나는 렌더링 엔진을 사용자가 볼 화면을 그려내는 역할을 하고, 다른 하나는 자바스크립트 엔진으로 자바스크립트 코드를 읽어내 기능을 작동시키는 역할을 한다. 브라우저가 html을 그리는 과정에 대해 알아보자.

 

 

브라우저가 html을 그리는 과정

1. 파싱

• html 파일을 DOM으로 변환(파싱)한다.

* 파서는 데이터(문서 파일)가 왔을 때 이것을 컴퓨터가 이해할 수 있게끔 구조를 재구성하는 단계라고 이해하면 된다. 파서는 우선 문서가 오게 되면 이 문서를 토큰이라는 유효성이 있는 단어 단위로 나누어 분해하고, 이것을 언어구문규칙에 따라 파싱트리로 재생성한다. 결과적으로는 기계어로 바꾸기 직전단계까지의 과정을 파서가 담당하고 있는 것이다. 파서가 파싱을 통해 파싱트리가 완성되면 파싱트리를 가지고 컴파일러는 기계어로 변환하는 작업에 들어간다. 일종의 컴퓨터에서 전처리기의 역할을 브라우저 파서가 맡고 있다고 생각하면 된다.
출처:https://velog.io/@brian_kim/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%ED%8C%8C%EC%84%9CParser

• <link>, <img>와 같은 태그를 만나면 리소스를 다운로드하며, <script> 태그를 만나면 DOM 파싱을 중단하고 자바스크립트를 해석한다. 

 

2. 스타일 계산

• CSS 역시 파싱 하여 CSSOM으로 변환한다.
• CSSOM 정보를 통해 DOM 노드에 대한 스타일을 결정한다.

 

3. 레이아웃

• 파싱 한 DOM과 CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)를 생성한다.
  • 렌더트리: 브라우저가 html을 분석하여 트리형태의 구조로 재해석한 것

• DOM과 계산된 스타일을 따라가며 요소의 크기나 좌표와 같은 정보를 담은 레이아웃 트리를 생성한다.
• 화면에 표현되는 정보만 트리에 담기게 된다. ( display:none은 담지 않으며 화면에 보여지는 가상요소는 트리에 담긴다. )

 

4. 페인트

• 레이아웃 트리(렌더트리)가 생성되면 이 트리를 따라 페인트 기록이 생성된다.
• 페인트 기록에는 요소를 렌더링 하는 순서가 저장되며, 지금까지의 정보를 바탕으로 한 페이지를 여러 개의 레이어로 나눈 뒤 그 위에 텍스트, 색, 이미지, 보더, 그림자 등 모든 시각적 부분을 그리는 작업이 진행된다.

 

5. 컴포지팅

• 각각의 레이어를 스크린에 픽셀로 표현하고(레스터링) 나누었던 레이어들을 합성하여 페이지를 그려낸다.

 

html 구조상의 변화 혹은 스타일의 변화가 있을 때

브라우저는 html 구조상의 변화 혹은 스타일의 변화가 있을 때 reflow, repaint라는 과정을 거치게 되는데 브라우저의 각 단계별 렌더링 과정들은 반드시 전 단계의 데이터가 필요하다. 따라서 전 단계에 변화가 일어나면 다음 단계에 모두 영향을 미친다.

 

reflow

• 레이아웃(너비, 높이) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더트리를 재성성하는 작업이다.

 

repaint

• reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 스타일 변경 시에는 reflow 과정을 생략한 repaint 작업만 수행한다.

 

css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야 하는데 reflow, repaint 현상은 브라우저에 상당한 부담이 된다. 이때 브라우저의 부담을 덜기 위해 사용자 컴퓨터의 GPU(graphic processing unit)를 이용한 그래픽 가속능력을 사용할 수 있는데 이러한 능력을 지원하는 css 속성이 바로 transform이다.

 

 

따라서 정적인 사이트에서 요소의 위치를 단순 배치하는 것은 position을 사용해도 괜찮지만, 애니메이션이나 혹은 동적으로 요소의 위치를 이동해야 하는 경우 transform 속성을 사용하는 것이 성능에 좋다.

 

 

참고자료1 : https://yozm.wishket.com/magazine/detail/646/

웹 브라우저의 렌더링이란? | 요즘IT

참고자료2 : https://velog.io/@brian_kim/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%ED%8C%8C%EC%84%9CParser

[웹]브라우저 파서(Parser)와 DOM