사실 세미나실 한칸도 못채울까봐 걱정했는데 생각보다 많은 분이 와주셨네요^^
거두절미하고, 발표 슬라이드 및 데모는 다음 링크에서...

다운로드 롸잇 나우!

여기에서 다룬 내용을 간단하게 요약하자면...
  • 실버라이트 애니메이션
    • 애니메이션의 기초
    • 프레임 기반 애니메이션
    • 실시간 애니메이션(스토리보드)
    • 파티클 시스템 기초
  • 실버라이트 그래픽 시스템과 성능 팁
    • 실버라이트 런타임의 렌더링 원리와 과정
    • 레이아웃
    • 성능 카운터(프레임 레이트 카운터)
    • 즉시 렌더링 영역(Intermediate Surface)
    • GPU 하드웨어 가속
    • 미디어 성능
  • 실행 성능 모니터링 및 분석
    • UI Spy 툴 사용
    • Visual Studio 2010 Profiler (VSP)
    • Windows Performance Toolkit (WPT)
꽤 많죠? 가능한 관련 정보에 접근할 수 있는 레퍼런스 링크를 많이 달았으니 부족한 부분은 해당 링크를 통해 검색해보길 바래요.

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo

나를 위한 메모.

오늘도 실버라이트로 굿뺑이 나이스뺑이를 치고 있어요.
여튼 평소와 같이 간단한 컨트롤을 하나 만들고 이것저것 하고 있는데, 이상하게도 겨우 50개의 컨트롤을 올리는데 로딩시간이 5초 이상 걸리는거에요. 물론 약간 복잡한 형태를 담고 있는 컨트롤이긴 하지만 아무리 생각해도 이건 아니었죠.

해결하기 위해 별 짓을 다 해봤어요. 컨트롤 안에 있는 무거운 구성요소(이미지, 스토리보드)들을 싸그리 주석처리 하고 다시 해보기도 하고 배경에 있는 다른 컨트롤들을 주석처리 하기도 하면서요. 그래도 거의 차이가 없더군요.

문제는 바로 RootVisual인 Page 클래스의 생성자 또는 Page의 Loaded 이벤트에서 50개의 컨트롤을 죄다 생성했기 때문이었더군요.

일반적으로 생각했을 때 Loaded 이벤트에서 다수의 컨트롤을 초기화 하는 것은 나쁜 생각이 아니지만 실버라이트 전체 페이지가 로드 될 때라면 얘기가 약간 달라지는 것 같아요.
전체 페이지의 초기화 사이클에서는 플러그인 초기화, 메모리 할당, 템플릿 및 스태틱 리소스 초기화 등 여러가지 일이 동시에 일어나기 때문에 일반적인 상황에 비해서 컨트롤이나 오브젝트의 생성/할당 작업이 훨씬 더 느려지는 걸로 보여요.

결국 이 문제를 해결하기 위해서 50개의 컨트롤을 생성하는 작업을 DispatcherTimer를 사용하여 0.5초 정도 지연 시켜서 했더니 5초 이상 걸렸던 초기화 작업이 거의 1초 이내에 완료가 되더군요.

여튼 실버라이트에서 성능적으로 가장 큰 저하가 일어날 때는 다수의 컨트롤을 한꺼번에 오브젝트 트리에 올릴 때인데요, 항상 대용량 데이터를 올릴 때에는 그 상황에 다른 로딩 작업이 있는지를 잘 생각해야 할거에요.

나중에 시간 여유가 생기면 이러한 차이를 체감할 수 있는 샘플을 만들어보도록 하죠.

신고
Posted by gongdo
글 머리에 [펌]을 붙여야 할지 말아야 할지 심각하게 고민했어요.
그만큼 원문이 너무 잘 정리되어 있네요. 번역은 약간 유치뽕한 삘로 해봤고 완전히 원문을 옮기진 않고 멋대로 줄이거나 내용을 바꾸거나 했으니 제 빈약한 번역보단 원문을 직접 읽어보시길 강력하게 권해요.


Silverlight: A few thoughts on minimizing CPU usage
Performance Tips


CPU 사용률 최소화를 위한 고려
※이 글은 1.0을 기준으로 작성되었지만 대체로 1.1에도 똑같이 적용될 만한 내용이에요.

1. IsWindowless=false가 더 빠릅니다.
실버라이트 컨텐츠가 다른 HTML 컨텐츠와 겹쳐서 표현될 필요가 없다면 (즉, 실버라이트를 호스팅하는 DIV가 postion:absolute가 될 필요가 없다면) IsWindowless를 켜지 마세요.

※ 기본 템플릿의 createSilverlight 함수를 참고하세요.

2. 불투명한 배경이 더 빠릅니다.
1.과 마찬가지로 다른 컨텐츠와 겹쳐서 표현될 필요가 없다면 실버라이트 HTML 컨트롤 배경 색상 속성에 투명도를 설정하지 마세요.

정 컨트롤의 배경 색상을 HTML의 배경색상과 일치시키고 싶다면 아래 문장으로 충분할거에요.
background:document.body.style.backgroundColor

※ 기본 템플릿의 createSilverlight 함수를 참고하세요.
※ 여기에서의 배경 색상은 실버라이트 HTML 컨트롤을 말하는것이고 실버라이트 애플리케이션 내의 투명도 설정은 상대적으로 적은 비용이 소비됩니다.
※ 만약 투명한 배경 색상을 사용하기로 결정했다면 MAC의 사파리에서도 성능을 점검해보세요.

3. 디자인에 딱 필요한 만큼의 퀄리티를 제공하세요.
- Framerate : 실버라이트 HTML 컨트롤의 속성에서 최대 framerate를 설정할 수 있어요. 많은 웹 사이트들은 모든 애니메이션과 미디어를 약 15fps(frames per second)로 제공하고 있고 대다수의 유저들은 불만 없어요.

- Media : 미디어 파일을 인코딩 할 때 웹에 적당한 파일은 대략 320x240 정도의 사이즈에 15fps 정도인 것을 기억하세요.

※ 물론 실버라이트의 최대 장점중 하나인 고화질 동영상 서비스일 경우는 이런 고려는 필요치 않겠죠?

4. 테스트하고 디버깅하세요!
- 똑같은 코드라도 서로 다른 머신에서 다른 품질와 성능을 보여줄 뿐만 아니라 OS와 브라우저의 설정에 따라서도 그래요.

- 아래와 같은 코드를 Page의 onLoad 이벤트 핸들러에 사용하여 IE나 사파리의 상태 바에 framerate를 보여줄 수 있어요. 원하는 fps를 초과한다면 framerate 속성을 낮게 잡아서 사용자의 CPU를 낭비하지 마세요.

agControl.settings.EnableFrameRateCounter = true;


성능 향상 팁
※ 가장 중요한 부분은 위의 글과 겹치지만 정말 좋은 내용이네요. 내용을 전부 옮기진 않고 임의로 줄이거나 추가했으니 원문도 함께 읽어보시길 바래요.

다양한 플랫폼과 브라우저에서 테스트하세요.
같은 코드도 각 플랫폼(윈도/맥, 심지어 윈도에서도 XP와 VISTA)과 브라우저(IE, FF, 사파리 등)에서 서로 다른 성능 양상을 보여요. 특히 HTML 컨트롤의 배경색상에 투명도가 있을 때와 Javascript를 많이 돌릴 때는 주의하세요.

디버깅할 때 EnableFrameRateCounter=true를 설정하세요.
설정하는 방법과 예제는 아래의 링크를 참고.
http://msdn2.microsoft.com/en-us/library/bb412371.aspx

투명한 배경은 쫌 아끼세요.
요 얘기도 겹치는 내용이죠.

실버라이트 애니메이션을 사용하는게 프레임 단위의 애니메이션을 만드는 것보다 빨라요.
가능한 실버라이트가 제공하는 Timeline 기반의 애니메이션을 사용하여 속성을 변경하는 것이 Javascript에서 하던 것 처럼 프레임 단위로 애니메이션 효과를 주는 것보다 빨라요.

※ 이 부분은 정말로 테스트 해보고 싶은 부분인데 시간이 시간이...ㅠ.ㅜ

Text 크기를 움직이는 건 무거워요.
텍스트 크기를 변경하는건 많은  시스템 리소스를 소비해요. 왜냐면 실버라이트가 텍스트를 렌더링 할 때 각 텍스트 자소마다 부드럽게 표시하는 처리를 하니까요. 텍스트 사이즈를 동적으로 변경(Transform과 FontSize 모두)하는건 굉장히 버겁고 프레임 저하의 원인이 돼요. 꼭 텍스트를 동적으로 조정할 필요가 있다면 텍스트를 표시하는 벡터 그래픽으로 처리하는게 나아요.

※ 아! 그래서 텍스트의 양이 많아지면 화면 렌더링 속도가 현저하게 떨어지는 것일지도 몰라요!

IsWindowless = true도 무거워요.
Windowless 모드도 필요할 때만 사용하세요. windowless는 실버라이트 컨텐츠가 사각영역이 아닌 다양한 모양으로 표시될 필요가 있을 때만 필요해요.

Opacity로 Visibility를 흉내내지 마세요.
가끔 Visibility를 Collapsed로 숨기는 것 대신에 Opacity를 0으로 설정하여 보이지 않게 설정할 때가 있는데요, Opacity가 0으로 설정되어 컨트롤이 보이지 않더라도 런타임은 여전히 히트테스트를 수행하게 돼요. 따라서 더 이상 보이지 않는 컨트롤은 명시적으로 Visibility를 Collapsed로 설정해주세요.

실버라이트는 렌더링과 미디어에 멀티-코어를 사용해요.
실버라이트는 컨트롤을 렌더링하거나 미디어를 재생할 때 멀티-코어의 이득을 얻을 수 있어요.

그러니까... 질러라아아아아아아아아아!!



풀스크린 모드일 때 사용하지 않는 개체는 숨기세요.
풀스크린 모드일 때는 보통 화면과 다른 구성을 가지는 경우가 많은데요, 이 때 보이지 않는건 Visibility를 Collapsed로 설정하여 숨기세요. 렌더링할 때 많은 이득을 얻을 수 있어요.

MediaElement의 Width/Height을 쓸데 없이 사용하지 마세요.
1:1로 보여줄거라면 Width/Height을 명시적으로 설정하지 않아도 알아서 원본 사이즈로 보여줘요. 만약 크기를 일정하게 변경한다면 가급적 그 사이즈에 맞게 재인코딩 하세요.

Path 개체들의 Width/Height을 사용하지 마세요.
Path들의 Width/Height을 변경하면 추가적인 stretching 작업으로 인한 비용이 소비되니까 각 Path의 좌표를 수정하는 것이 이득이에요.

Downloader의 사용이 끝났으면 이벤트를 제거하고 NULL로 설정하세요.
뭐가 이득인지는 말해주지 않네요. 뭐 사용하지 않는걸 줄이는게 이득인건 당연하지만요.

Javascript가 돌아갈 때 플러그인은 그려지지 않아요.
브라우저에서 Javascript가 돌아갈 때에 플러그인의 그리기 동작은 중지돼요. 만약 Javascript로 CPU 소비가 큰 작업을 수행해야 한다면 가급적 작은 작업으로 분할하여 실행하는 것이 framerate를 유지할 수 있는 비결이에요.




캬... 최근에 애니메이션을 테스트하면서 생각 처럼 성능이 잘 안나와서 고민을 많이 했는데 이미 답이 다 있었네요. 딱 봐도 개선할 만한 부분이 많아요.

자신만의 성능 관련 이슈나 팁도 모집합니다. :)
신고
Posted by gongdo


티스토리 툴바