렌더링이란?

사용자가 브라우저를 통해 웹사이트를 접속하면, 서버로부터 HTML, CSS등 웹사이트에 필요한 리소스를 다운 받는다.

브라우저가 페이지를 렌더링하려면 먼저 HTML코드는 DOM, CSS는 CSSOM트리를 생성해야 한다.

 

1-1. DOM 트리 생성

출처 : https://bit.ly/2WochoN

   - 변환 : 브라우저가 HTML의 원시 Byte를 읽어와서, HTML에 정의된 인코딩( UTF-8 )에 따라 개별 문자로 변환

  - 토큰화 : 브라우저가 문자열을 W3C표준에 지정된 고유 토큰으로 변환

  - 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환

  - DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리구조로 연결

브라우저는 HTML 마크업 처리를 할 때마다 위의 모든 단계 수행

 

1-2. CSSOM 트리 생성

 - HTML 마크업 내에 직접 스타일을 선언할 수도 있지만, head 태그에 외부 css 파일을 참조하거나,

 head태그에 style 태그를 정의할 수 있다.

 - HTML과 마찬가지로 외부 css파일에 정의된 스타일과 style태그에 작성된 스타일을 브라우저가 이해하고 처리할 수 있는형식으로 변환해야함.

 

  - DOM트리 생성하는 과정과 동일한 과정으로 CSSOM트리 생성

 

 

2.렌더링( Rendering ) 트리 생성

https://bit.ly/3iQ3ovQ

DOM트리와 CSSOM 트리가 만들어지면, 이 둘을 결합해서 렌더링 트리를 생성한다.

렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함된다.

 

 

3. 레이아웃( Layout )단계

출처 : https://bit.ly/3xdGFyN

 

레이아웃 단계에서는 뷰포드 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box모델이 출력됨.

모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환

 

4. 페인팅 단계

마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환.

레이아웃 단계에서 모든 계산이 완료되면, 화면에 요소를 그린다. ==> 이 단계를 '페인팅' or '래스터화' 라고함.

이미 레이아웃 단계에서 각 노드들이 위치, 크기, 색상 등 스타일이 모두 계산되었기 때문에 화면에 실제 픽셀로 변환.

 

리플로우( Reflow )

사용자가 웹 페이지에 처음 접속하면, 렌더링 과정을 거쳐 화면에 모든 요소가 그려짐.

이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML요소가

추가되거나, 기존 요소의 스타일 바뀌거나하는 변경이 일어난다.

이런 변경을 통해 영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행.

이러한 과정을 리플로우라고 한다.

 

리페인트 ( Repaint )

리플로우는 단지 변경사항을 반영하기 위해 렌더링 트리를 생성하고, 레이아웃 과정을 다시 수행하는 것.

실제 이 결과를 화면에 그려지게 하기 위해서는 다시 페인팅 단계를 수행해야 한다.

이를 리페인트 ( Repaint ) 라고 한다.

 

기존요소에 변경사항이 생겼다고 해서 항상 리플로우-리페인트가 일어나는 것은 아니고,

레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우 수행없이 리페인트만 수행.

※ 리플로우가 일어나면 반드시 리페인트가 일어남.

 

리플로우가 일어나는 대표 속성들

 : position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow

리페인트만 일어나는 대표 속성들

: background, color, text-decoration, border-style, border-radius