Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

3.564 visualizaciones

Publicado el

GDG Seoul 8월 모임 발표 자료

Publicado en: Internet
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

  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

×