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


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

Submit comment.

  1. Favicon of http://blog.empas.com/lisyoen BlogIcon 이창연 2007.08.11 18:09  comment URL  Edit/Remove  Submit comment.

    유용한 팁이군요.
    번역 감사합니다.

  2. YJ 2007.08.22 00:54  comment URL  Edit/Remove  Submit comment.

    이점은 플래시와 비슷하군요.
    플래시에서 가장 로드가 심한 것 1순위가 알파채널입니다. 어쩔 수 없는 그래픽처리인듯.
    저 알파채널이 그래픽카드 단에서 가속으로 처리하면 좋은데, 웹용 저사양 호환성을 위해선 함부로 가속 기능을 쓸 수는 없나봅니다. CPU계산빨로만 밀어줘야 하는 듯 하네요...

  3. Favicon of http://gongdo.tistory.com BlogIcon 공도 2007.12.15 02:51  comment URL  Edit/Remove  Submit comment.

    참고로 위의 글에서는 15FPS가 웹에서의 기본값으로 좋다고 했는데 솔직히 15FPS는 너무 끊기는 느낌이 들고요, 30FPS가 가장 적당하지 않나 싶어요. 이건 애니메이션에 따라 느낌이 다를 수 있으니 다양한 값으로 테스트해 보시길 바래요.

  4. 길버트 2008.01.22 18:24  comment URL  Edit/Remove  Submit comment.

    수고하셨구요. EnableFrameRateCounter=ture 오타 신고요~!

  5. 길버트 2008.01.23 00:40  comment URL  Edit/Remove  Submit comment.

    'Downloader의 사용이 끝났으면 이벤트를 제거하고 NULL로 설정하세요.'
    Garbage Collector에 의해서 빨리 제거 될 수 있도록 하는 거겠죠! ^^

  6. Favicon of http://gongdosoft.com BlogIcon 공도 2008.01.23 11:47  comment URL  Edit/Remove  Submit comment.

    길버트/ 넵 정보 감사합니다.