애니메이션 최적화 (Reflow, Repaint)
쟁크 현상
브라우저는 보통 초당 60프레임으로 렌더링
초당 프레임이 떨어지면 ex) 30,20 -> 쟁크(애니메이션 버벅이는 현상) 발생
브라우저 렌더링 과정
1) DOM + CSSOM
- Render Tree
- Layout
- Paint - 3,4를 통해 여러개의 레이어가 만들어짐
- Composite - 각 레이어 합성
1초에 60프레임이기 때문에 약 16.7ms에 한 프레임을 그려내야 함. 재렌더링이 해당 시간안에 완료되지 않으면, 특정 프레임 누락 -> 이전 프레임 보여줌
리플로우
width, height 변경시 레이아웃을 다시 하며 렌더링 과정 실행
리페인트
color 등 변경시 레이아웃 제외하고 렌더링 과정 실행
리플로우, 리페인트 피하기
GPU 도움받기
transform, opacity(GPU 관여할 수 있는 속성) 변경시 레이아웃, 페인트 과정 제외하고 렌더링 과정 실행
각 속성에 대한 영향도
코드 분석하기
예제 코드의 Bar 그래프의 경우 width를 변경하기 때문에 매번 리플로우가 발생한다.
const BarGraph = styled.div`
position: absolute;
left: 0;
top: 0;
width: ${({width}) => width}%;
transition: width 1.5s ease;
height: 100%;
background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'};
z-index: 1;
`
따라서 리플로우를 피하기 위해 width
대신 다른 속성을 사용해야 한다.
최적화하기
width
대신 transform
의 scaleX
를 사용해서 리플로우, 리페인트를 피할 수 있다.
transform-origin: left
를 줘서 막대그래프가 왼쪽을 기준으로 붙어있게 했다.
const BarGraph = styled.div`
position: absolute;
left: 0;
top: 0;
// width: ${({width}) => width}%;
width: 100%;
transform: scaleX(${({width}) => width / 100});
transform-origin: left;
transition: transform 1.5s ease;
height: 100%;
background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'};
z-index: 1;
`
결과 확인하기
일단 쟁크현상이 더이상 생기지 않는다.
퍼포먼스 탭에서 검사해보면,
- 변경 전
- 변경 후
리플로우, 리페인트가 발생하지 않는 것을 확인할 수 있다.
'프론트엔드 > 성능 최적화' 카테고리의 다른 글
렌더링 성능 최적화 - Redux (1) | 2023.05.01 |
---|---|
렌더링 성능 최적화 - Layout Shift 피하기 (0) | 2023.05.01 |
렌더링 성능 최적화 - Bottleneck code (0) | 2023.05.01 |
로딩 성능 최적화 - 텍스트 압축, 불필요한 CSS 제거 (0) | 2023.04.28 |
로딩 성능 최적화 - 캐시 (0) | 2023.04.28 |