통계 사이트 최적화

실습 내용 & 분석 툴 소개

이번 강의에서는 애니메이션 최적화(Reflow, Repaint), 컴포넌트 Lazy Loading(code splittin), 컴포넌트 Preloading, 이미지 Preloading 등을 알아보고자 한다. 여기에서 애니메이션 최적화는 렌더링 성능을 최적화하며, 나머지 3가지는 로딩 성능 최적화를 돕는다.

이번 시간 분석 툴도 network, performance, webpack-bundle-analyzer을 이용해보고자 한다.

서비스 탐색 & 코드 분석

해당 프로젝트는 리우 올림픽과 런던 올림픽의 통계 데이터를 비교하는 사이트이다. 프로젝트는 적절히 clone 받았다면 코드 분석을 진행해본다.

src/App.js

<div className="App">
    <Header />
    <InfoTable />
    <ButtonModal onClick={() => { setShowModal(true) }}>올림픽 사진 보기</ButtonModal>
    <SurveyChart />
    <Footer />
    {showModal ? <ImageModal closeModal={() => { setShowModal(false) }} /> : null}
</div>

위와 같은 구조로 메뉴가 구성되어 있다.

애니메이션의 분석 (Reflow와 Repaint 이론)

애니메이션을 분석하여 rellow와 repaint에 대해 알아보도록 한다. 사이트에서 애니메이션이 들어간 영역은 하단 설문 결과에 그래프 클릭 시 변경되는 수치데이터를 애니메이션으로 보여주는 부분이다.

해당 애니메이션 동작을 자세히보면 동작이 좀 버벅이는 것을 확인할 수 있다. 현상을 좀 더 확실히 확인하기 위해서는 Performance 탭에서 CPU 설정은 6x slowdown으로 설정하여 Record를 하면 더 버벅이는 것을 확인할 수 있다. 왜이럴까? 실제 코드를 보면 아래 바 형태에 transition이 걸려있는 것이 대부분이다.

.hweFEX {
  -webkit-transition: width 1.5s ease;
  transition: width 1.5s ease;
  /* ... */
}

이유를 알기 위해서는 브라우저에서 애니메이션이 어떻게 동작하는지를 알아야 한다.

애니메이션은 여러가지 이미지가 연속적으로 바뀌면서 움직이는 것처럼 보이는 것을 의미한다. 이러한 애니메이션을 구현하는 다수의 프레임 중 하나가 사라진다면? 애니메이션이 뚝뚝 끊기게 보일 것이다.

보통 이를 쟁크현상이라고 하는데, 우리의 브라우저는 초당 60프레임(60FPS)을 그릴 수 있는데, 이것이 초당 30프레임 혹은 20프레임 등으로 적어져서 애니메이션이 버벅이는 쟁크현상이 발생하는 것이다.

브라우저는 왜 60프레임을 구현하지 못할까? 이를 알기위해서는 브라우저 렌더링 과정을 알아야 한다. 브라우저는 동작하기 위해 아래와 같은 렌더링 과정을 가진다.

DOM+CSSOM → Render Tree → Layout → Paint → Composite(각 레이어 합성)

DOM + CSSOM → Render Tree 과정

Layout 과정

Paint 과정

이러한 전체적인 과정을 Critical Rendering Path, Pixel Pipeline이라고 한다. 만약 완성된 화면에서 사용자의 이용으로 화면에 변화가 생기면, 이를 기반으로 새로운 브라우저 렌더링 과정을 거치게 되는 것이다. 이러한 과정을 밟는 가운데 60프레임을 빠른 시간안에 새로 생성하는 과정이 오래 걸리므로 브라우저가 몇 부분의 프레임을 자체적으로 실행하지 않아버린다. 따라서 쟁크 현상이 발생한다.