O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

고성능 애니메이션 개발 기법 및 성능 최적화

3.469 visualizações

Publicada em

GDG Seoul 8월 모임 발표 자료

Publicada em: Internet
  • Seja o primeiro a comentar

고성능 애니메이션 개발 기법 및 성능 최적화

  1. 1. 고성능 애니메이션 개발 기법 및 성능 최적화 LG CNS 이병호 1
  2. 2. 목 차 1. 애니메이션이란? 2. 애니메이션 기법 3. 성능 최적화를 위해서 알아야 할 것 4. 애니메이션 성능 최적화 기법 2
  3. 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. 4. 애니메이션 기법 2-1. CSS Animations • CSS에서 미리 정의된 애니메이션을 브라우저 의 기능을 이용해서 애니메이션의 중간 상태 를 나타내는 키프레임들을 계산해서 애니메 이션을 브라우저에서 렌더링 함 • 자바스크립트를 모르더라도 간단하게 애니메 이션을 만들 수 있음 • 브라우저가 애니메이션을 최적화 (frame-skipping 같은 여러 기술을 이용) • 자바스크립트 애니메이션과 같은 표현력이 부족 • 정해진 시간에 정해진 동작을 하도록 선언한 후 정해진 애니메이션을 브라우저에서 표현 • 선언 형 애니메이션 4* 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_animations
  5. 5. 애니메이션 기법 2-2. JavaScript 기반 Animation • 다양한 컨트롤 또는 사용자 입력에 의해서 상태가 변하는 애니메이션을 구현하기 위해서 사용 • 애니메이션의 시간, 효과 등의 제한이 없 이 구현이 가능 • 프레임 단위로 애니메이션을 정의 • setInterval, setTimeOut을 이용한 애니메이션 • requestAnimationFrame을 이용한 애니메이션 • 명령형 애니메이션 5 * 참고 : Web Animations Spec http://www.w3.org/TR/web-animations/
  6. 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. 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. 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. 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. 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
  11. 11. 11 3-4. 기타 성능 최적화를 위해서 알아야 할 것
  12. 12. 애니메이션 성능 최적화 기법 4-1. JavaScript 실행성능 최적화 • 프레임 당 수행되는 JavaScript 함수의 실행 시간을 10ms 에 수행될수 있도록 최적화하여, 빼먹거나 수행시간이 오래 걸려서 사용자에게 부적 절한 화면을 제공하지 않도록 함 • 애니메이션 관련 함수 precompiled을 이용한 애니메이션 함수 실행 시 간 최소화 • 마이크로 작업을 사용하여 여러 프레임에서 Dom Element를 변경함. 큰 작업을 마이크로 작업으로 분할하여 구현 • requestAnimationFrame를 이용한 애니메이션의 구현. 브라우저 Paint 간격에 맞춰 완벽하게 조정되며 적절한 리소스만 사용 12
  13. 13. 애니메이션 성능 최적화 기법 4-2. Painting, Layout을 최소화 • Painting 을 나누어서 수행 • 보이지 않는 Element는 애니 메이션이 동작하지 않도록 구현 • 보이지 않는 영역의 Element 는 Opacity, Visibility, Display 속성 등을 이용해서 Paint와 Layout이 최소화 되 도록 구현 13
  14. 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. 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. 16. 애니메이션 성능 최적화 기법 4-3. 애니메이션의 기능 및 특징에 적합한 기법 16 • 단순하고 정해진 동작만 수행하는 애니메이션은 CSS Animations 기반으 로 구현하는 것이 성능 관점에서 이득이 있으며 구현이 용이 *참고 : http://enyojs.com/sampler/latest/lib/moonstone/samples/ToggleItemSample.html • Jank Busting for Better Rendering Performance

×