3. 애니메이션이란?
• 애니메이션은 정지된 화면을 잔상과 환등으로 시청자에게 착시를
일으키는 기법
• 정지화면을 필름의 프레임 안에 찍고 조금씩 움직여가며 다시 찍기를 반복하며
촬영한 영상을 빠르게 넘겨 보게 되면 정지화면을 사람이 눈이 못 따라가서
잔상이 남게 되고 마치 움직이는듯한 느낌의 착각이 들게 됨
https://youtu.be/hYQ7Hja_Teo
3
* 참고 : https://namu.wiki/w/%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98
4. 애니메이션 기법
2-1. CSS Animations
• CSS에서 미리 정의된 애니메이션을 브라우저
의 기능을 이용해서 애니메이션의 중간 상태
를 나타내는 키프레임들을 계산해서 애니메
이션을 브라우저에서 렌더링 함
• 자바스크립트를 모르더라도 간단하게 애니메
이션을 만들 수 있음
• 브라우저가 애니메이션을 최적화
(frame-skipping 같은 여러 기술을 이용)
• 자바스크립트 애니메이션과 같은 표현력이
부족
• 정해진 시간에 정해진 동작을 하도록 선언한
후 정해진 애니메이션을 브라우저에서 표현
• 선언 형 애니메이션
4* 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_animations
5. 애니메이션 기법
2-2. JavaScript 기반 Animation
• 다양한 컨트롤 또는 사용자 입력에 의해서
상태가 변하는 애니메이션을 구현하기
위해서 사용
• 애니메이션의 시간, 효과 등의 제한이 없
이 구현이 가능
• 프레임 단위로 애니메이션을 정의
• setInterval, setTimeOut을 이용한
애니메이션
• requestAnimationFrame을 이용한
애니메이션
• 명령형 애니메이션
5
* 참고 : Web Animations Spec http://www.w3.org/TR/web-animations/
6. 애니메이션 기법
2-3. requestAnimationFrame
• setTimeout 및 setInterval을 사용하여 그린 애니메이션은, 과도하게 그려지
고 시스템의 자원을 낭비할 여지가 있었음
• 과도한 그리기는 순간 순간 프레임이 손실되기 때문에 애니메이션이 끊어지
는 현상을 가져옴
• 시스템이 프레임을 그릴 준비가 되었을 때 애니메이션 프레임을 호출하여 애니
메이션 웹 페이지를 만들 수 있는 더 유연하고 효율적인 방법. 프레임 손실 문제
를 해결
• 스크립트 기반 애니메이션용 타이밍 컨트롤
• App이 브라우저 그리기 간격에 맞춰 완벽하게 조정되며 적절한 리소스만 사용
6
대부분의 모니터에 표시되는 16.7ms 디스플레이 주파수
일반적인 10ms setTimeout
* 참고 : https://msdn.microsoft.com/ko-kr/library/Hh920765(v=VS.85).aspx
7. 성능 최적화를 위해서 알아야 할 것
3-1. 60fps and Device Refresh Rates
• 요즘 대부분의 디스플레이는 초당 60회의 빈도로 화면을 갱신
• 사용자에게 미려한 화면을 제공하기 위해서는 Device Refresh Rates와
일치하는 프레임 제공이 필요함
• 각 프레임에는 16ms여 시간만 할당 (1초/60 = 16.66ms)
• 실행 준비를 해야 하므로 10ms 내에 모든 작업을 완료해야 함
• 이 제한 시간을 충족하지 못하면 Frame Refresh Rates가 떨어지고,
화면이 떨리는 현상이 일어남
7
* 참고 : https://developers.google.com/web/fundamentals/performance/rendering/
8. 성능 최적화를 위해서 알아야 할 것
3-2. The pixel pipeline
• 렌더링 성능 개선을 위해서 알아야 할 주요 5가지 영역
• JavaScript : requestAnimationFrame, jQuery의 animate 함수, 데이터의 변
경, 정렬, 페이지에 DOM Element 추가 등 시각적 변화를 일으키는 작업을 처리
하는데 사용
• Style calculations : CSS Selector 에 따라서 CSS Rules를 어떤 Element 에 적용
할지 계산하는 프로세스. 각 Element 에 적용할 최종 Style이 계산되는 단계
• Layout : Style calculations 후에 각 Element 가 객체의 정확한 위치와 크기를
계산하는 과정. 그러므로 이 프로세스는 브라우저에 상당한 영향을 줄 수 있음
• Paint : 다 만들어진 렌더트리를 가져다가 화면에 픽셀을 그리는 단계
• Compositing : 웹 페이지는 여러 개의 Layer로 이루어져 있고, 페이지가 정확
히 렌더링 되려면 정확한 순서로 화면에 Paint 되어야 함
8
* 참고 : https://developers.google.com/web/fundamentals/performance/rendering/
9. 성능 최적화를 위해서 알아야 할 것
3-3. HARDWARE(GPU) ACCELERATION
• 하드웨어 가속은 GraphicsLayer 단위로 렌더
링 된 이미지를 GPU를 이용해 한 장의 이미지
로 합성(composition)해서 화면에 출력하는 기술
• HTML 코드를 통해 DOM Tree를 구성하고, 화면
에 표현되는 요소는 RenderObject Tree 로 구성
• RenderLayer 요소 가운데 GPU에 업로드되는 요
소는 다시 GraphicsLayer로 분리되며, Layer
각각을 독립적인 소프트웨어 비트맵으로 출력
• GPU에 텍스처로 업로드
• 다양한 Layer를 화면에 표시할 최종 이미지로
함께 합성
• Show composited layer borders 옵션으로 가
속 대상 Layer을 확인
9
* 참고 : http://d2.naver.com/helloworld/2061385
10. 성능 최적화를 위해서 알아야 할 것
3-4. 기타
• Chrome DevTools : Inspecting the DOM and styles, Working with the Console,
Debugging JavaScript, Improving network performance, Improving rendering
performance, JavaScript & CSS performance, Audits, Inspecting storage
* https://developer.chrome.com/devtools
• FPS : Frame Per Second * https://developer.chrome.com/devtools/docs/rendering-settings
• Navigation Timing API : 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이
터를 제공. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API
는 더 유용하고 정밀한 종단 간(end-to-end) 대기 시간(latency)을 제공
* http://www.html5rocks.com/ko/tutorials/webperformance/basics/
• RAIL Performance Model
Response: respond in under 100ms
Animation: render frames every 16ms
Idle: maximize idle time 이벤트로 인해서 다른 작업이 block되지 않도록 함.
Load: deliver content under 1000ms
* https://developers.google.com/web/tools/profile-performance/evaluate-performance/rail
10
12. 애니메이션 성능 최적화 기법
4-1. JavaScript 실행성능 최적화
• 프레임 당 수행되는 JavaScript 함수의 실행 시간을 10ms 에 수행될수
있도록 최적화하여, 빼먹거나 수행시간이 오래 걸려서 사용자에게 부적
절한 화면을 제공하지 않도록 함
• 애니메이션 관련 함수 precompiled을 이용한 애니메이션 함수 실행 시
간 최소화
• 마이크로 작업을 사용하여 여러 프레임에서 Dom Element를 변경함. 큰
작업을 마이크로 작업으로 분할하여 구현
• requestAnimationFrame를 이용한 애니메이션의 구현. 브라우저 Paint
간격에 맞춰 완벽하게 조정되며 적절한 리소스만 사용
12
13. 애니메이션 성능 최적화 기법
4-2. Painting, Layout을 최소화
• Painting 을 나누어서 수행
• 보이지 않는 Element는 애니
메이션이 동작하지 않도록
구현
• 보이지 않는 영역의 Element
는 Opacity, Visibility,
Display 속성 등을 이용해서
Paint와 Layout이 최소화 되
도록 구현
13
14. 애니메이션 성능 최적화 기법
4-2. Painting, Layout을 최소화
14
• Painting, Layout이 필요하지 않
은 경우 Compositing 만으로
Animation 이 수행되도록 구현
(Opacity와 Transform 만을 이
용한 Animation 구현)
*참고 :
https://developers.google.com/web/fundamentals/p
erformance/rendering/stick-to-compositor-only-
properties-and-manage-layer-count?hl=ko
http://csstriggers.com/
http://famous.org
http://demo.famo.us/lightbox/
15. 애니메이션 성능 최적화 기법
4-2. Painting, Layout을 최소화
15
• 적절한 하드웨어 (GPU) 가속 Layer 생성을 통한 성능 최적화. 무분별
한 가속용 Layer 생성은 메모리 등 리소스의 낭비의 가능성이 있음
• Layer가 성능 개선에 도움이 된다는 사실을 인지하고 아래 코드
를 사용하여 페이지의 모든 요소를 승격하는 것은 매력적임
* 참고 :
https://developers.google.com/web/fundamentals
/performance/rendering/stick-to-compositor-
only-properties-and-manage-layer-count?hl=ko
16. 애니메이션 성능 최적화 기법
4-3. 애니메이션의 기능 및 특징에 적합한 기법
16
• 단순하고 정해진 동작만 수행하는 애니메이션은 CSS Animations 기반으
로 구현하는 것이 성능 관점에서 이득이 있으며 구현이 용이
*참고 : http://enyojs.com/sampler/latest/lib/moonstone/samples/ToggleItemSample.html
• Jank Busting for Better Rendering Performance
