브라우저는 렌더링을 할때 다음과 같은 작업을 진행합니다.
- HTML, CSS, JS 파일을 다운로드한다.
- HTML, CSS를 각각 DOM, CSSOM 으로 변환한다.
- 두 개를 합쳐서 컨텐츠와 스타일을 가진 Render Tree를 구성한다.
- Render Tree를 가지고 위치, 크기를 계산하는 Layout 단계를 거친다.
- 색을 채우는 Paint 단계를 거친다.
- 각 레이어를 합치는 컴포지트 단계를 거친다.
이 전체과정을 Critical Rendering Path, Pixel Pipeline 이라고 한다.
스타일일 변경되면 그 내용을 가지고 이 과정을 다시 거치게 됩니다.
초당 60프레임, 16ms 안에 과정을 거쳐야 하는데 이 과정이 길어지면 프레임이 생략이 되서 쟁크현상이 일어나게 되는 것입니다.
이러현 현상을 최적화하기 위해서는 비용이 많이 드는 Layout, Paint 단계을 건너 뛰어야 하는데요.
이 두단계를 GPU가 관여할수 있게 변경하면 됩니다.
GPU가 관여하는 trasform, opacity 속성을 줘서 GPU가 직접 데이터를 가동해서 Layout, Paint 단계를 건너뛰어 Composite 단계로 직접 레이어를 전달하면 된다.
Reflow
위치나 크기 변경이 되면 DOM, CSSOM을 새로 만들고 각 단계가 실행이 되는데 이러한 변화를 Reflow라고 합니다.
다음과 같은 속성이 Reflow를 일으킵니다.
position, width, height, left, right,top, bottom, margin, padding, border, border-width, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align
Repaint
위치나 크기 속성이 아닌 컬러를 변경하면 DOM, CSSOM을 새로 만들고 그에 따른 Render Tree를 다시 만들지만 크기나 위치 변화가 없기에 Layout 단계를 거치지 않고 Paint 단계로 건너 뛰는데 이러한 변화를 Repaint 라고 합니다.
다음과 같은 속성이 Repaint를 일으킵니다.
background, background-image,background-position, background-repeat,background-size, boarder-radius, border-style, box-shadow, color,line-style, outline, outline-color, outline-style,outline-width, text-decoration
쟁크 현상
디스플레이 주사율이 60프레임이기에 브라우저도 그에 맞게 초당 60프레임으로 렌더링합니다.
그런데 초당 60프레임으로 못 그리면 화면에 버벅이는 현상이 발생하는데
그것을 쟁크 현상이라고 부릅니다.
