1. 윤정빈
브라우저 렌더링 과정의 Reflow와 Repaint
CSS 애니메이션 성능 비교

2. Width 증가
!
Width를 고정하고 left 속성으로 위치를 변경
Transform: scaleX() 증가
주제 선정 이유
같은 애니메이션을 여러 방법으로 구현해보면서 성능 차이가 궁금했음

3. 브라우저 구조
User Interface
Browser engine
Rendering engine
Networking Javascript engine UI Backend
Data
Persistence

4. 브라우저 렌더링 과정
HTML Text
CSS
Stylesheet
Text
DOM Tree
CSSOM
Style
(Render Tree)
Layout Paint Composite
Style: 요소에 적용할 스타일 계산
Layout: 레이어를 생성하여 화면에 각 요소가 어떻게 위치할 지 계산하여 화면에 배치
Paint: 생성된 레이아웃에 픽셀을 추가하여 화면에 그리는 과정
Composite: 생성한 레이어 계층을 합성. 이 계층을 내려다보면 모든 요소가 고유한 위치(복합 계층)를 갖는
완전한 웹 페이지로 보여짐

5. 애니메이션을 위한 GPU 사용
Composite
CPU가 애니메이션을 처리하기 위해 GPU와 통신하는 단계
Transform, opacity 와 같은 속성을 사용
GPU
애니메이션을 처리하는 또 다른 작은 기계
많은 UI 계산 처리가 가능
Style Layout Paint Composite
CPU 대신 GPU를 사용해 웹 브라우저가 애니메이션 수행(하드웨어 가
새 레이어 생성
( UI요소의 애니메이션과 아닌 부분을 나눠 다시 렌더링 하지 않기 위

6. Reflow
생성된 DOM 노드의 레이아웃(너비, 높이, 위치 등) 변경 시 영향받는
모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정.
Reflow와 Repaint
Repaint
reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 과정.
수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시에는
reflow 과정이 생략 된 repaint 작업만 수행.
Style Layout Paint Composite
Reflow Repaint

7. 1. reflow가 일어나는 애니메이션의 경우 가급적 position:fixed 또는 position:absolute로 지정
Reflow를 최소화하는 방법
지정된 노드를 전체 노드에서 분리시켜 해당 노드만 Reflow가 발생하도록 제한
2. 인라인 스타일 지양
인라인 스타일은 HTML이 파싱되는 시점에서 바로 레이아웃에 영향을 미치기 때문에 추가적인 Reflow가 발생함
3. Table 레이아웃을 지양
Table 태그는 테이블 값에 따라 넓이를 계산하여 화면에 그려지게 됨
조금만 변경이 있어도 모든 테이블의 넓이가 다시 계산되어야 함
4. CSS 하위 선택자는 필요한 만큼만 정리
Reflow 자체보다는 reflow가 유발시키는 CSS Recalculation에 필요
CSS 규칙은 오른쪽에서 왼쪽으로 이동하는데 이 과정에서 더 이상 일치하는 규칙이 없거나 잘못된 규칙이 나올 때까지 계속 됨
그러므로 불필요한 선택자를 사용하는 것은 성능 저하의 요인
/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
display:block;
}
/* 올바른 예 */
.reflow_list .btn {
display:block;
}

8. 애니메이션 성능 비교 Style Layout Paint Composite
Reflow Repaint

9. 애니메이션 성능 비교
Transform: translate()을 이용한 애니메이션
Style Layout Paint Composite
Reflow Repaint

10. 애니메이션 성능 비교
top, left를 이용한 애니메이션
Style Layout Paint Composite
Reflow Repaint

11. Transform: translate()을 이용한 애니메이션 Top,left를 이용한 애니메이션
애니메이션 성능 비교 Style Layout Paint Composite
Reflow Repaint

12. https://gyofeel.github.io/web/js/css/%EC%9B%B9%EC%97%90%EC%84%9C%EC%9D%98-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%8D
https://wit.nts-corp.com/2020/06/05/6134
참고 자료
CSS 애니메이션의 성능 아는 만큼 좋아져요!
웹에서의 애니메이션 퍼포먼스 개선하기
https://youtu.be/XoyWzOh3Sy4
Redraw와 reflow - 코드스테이츠 권오연 교육 엔지니어