Из блога Майка Сноу: как улучшить производительность приложений Silverlight?

  • Article

Майк работает в группе Web Tools компании Microsoft и ведет блог, посвященный программированию на Silverlight. Вот, на мой взгляд, очень интересный и полезный совет, посвященный повышению производительности приложений Silverlight. Ниже – мой перевод этой статьи. Ссылка на оригинал, как обычно, в конце статьи.

1. Отладка

Следующие приемы помогут вам увеличить производительность отладки ваших приложений Silverlight:

  • EnableRedrawRegions – включите эту опцию и вы увидите как и когда происходит перерисовка в вашем приложении. Если эта настройка включена, вы сможете видеть, что именно прорисовывается, т.к. зоны отрисовки окрашены голубым, желтым или розовым цветами. Эта настройка устанавливается в месте создания вашего приложения.

Пример:

 <div style="height:100%"> 

    <asp:Silverlight ID="Xaml1" EnableRedrawRegions="true"  

      EnableFrameRateCounter="true" runat="server" PluginBackground="Transparent"  

      Windowless="true" Source="~/ClientBin/Snowflakes.xap" 

      MinimumVersion="2.0.30523" Width="100%" Height="100%" /> 

 </div>

  • MaxFrameRate – чтобы увидеть какой именно компонент вашего приложения оказывает наиболее негативный эффект на производительность, вы можете установить опцию MaxFrameRate. Затем вы можете поэкспериментировать с добавлением и удалением компонентов вашего приложения, чтобы проследить изменения производительности. Установите настройки, как показано выделенным текстом ниже:

     <div  style="height:100%"> 

        <asp:Silverlight ID="Xaml1" MaxFrameRate="10"  EnableFrameRateCounter="true"   

           runat="server" PluginBackground="Transparent" Windowless="true" 

           Source="~/ClientBin/Snowflakes.xap" MinimumVersion="2.0.30523" Width="100%"  

           Height="100%" /> 

     </div>

     

  • XPerf – это инструмент профилирования, который может быть использован для анализа вашего приложения Silverlight. Например, вы хотите измерить нагрузку процессор и использование диска. Установите утилиту отсюда: https://msdn.microsoft.com/en-us/library/cc305187.aspx. Для более детальной информации и инструкций, пожалуйста, прочтите этот блог: https://blogs.msdn.com/seema/archive/2008/10/08/xperf-a-cpu-sampler-for-silverlight.aspx.

2. Вывод медиа-данных

Для каждого кадра и каждого пикселя при прорисовке медиа-элемента Silverlight происходит:

  1. Декодирование изображения
  2. Конвертирование цветовой модели (YUV)
  3. Изменение размеров (при необходимости)
  4. Добавление дополнительных элементов, если нужно (например, накладка икон поверх, установка полос прокрутки и т.п.)
  5. Прорисовка

Несколько замечаний о производительности:

  1. Кодируйте ваши медиа-данные с минимально допустимой частотой кадра.
  2. Выводите ваши данные в исходных размерах, чтобы избегнуть потерь при вычислении новых размеров. Если вам все же нужно использовать другие размеры, перекодируйте ваши данные в этот размер. Благодаря этому вы сэкономите на полосе пропускания и интерполяции каждого пикселя в каждом фрейме.
  3. Добавление дополнительных элементов к медиа очень затратный процесс, постарайтесь обойтись без этого, если возможно.
  4. Используйте значение частоты кадров около 60 для улучшения результатов.

3. Вывод текста

Прорисовка текста – весьма затратный процесс, которого следует избегать по возможности. Следующие события вызывают прорисовку текста заново:

  1. Перемещение или масштабирование текста.
  2. Наличие медиа-элемент на странице.
  3. Наличие анимации на странице.

4. Silverlight компонент

  1. Запуск приложения Silverlight с опцией "Windowless=false" происходит быстрее, чем с "Windowless=true". Устанавливайте в true только, если вам нужно наложить HTML поверх вашего приложения Silverlight.
  2. Не устанавливайте настройку фона вашего приложения Silverlight "PluginBackground=Transparent" только, если это не абсолютно необходимо. Иначе это добавит дополнительную нагрузку на каждую прорисовку. Если необходимо, чтобы цвет фона вашего приложения совпадал с цветом фона HTML страницы, просто установите цвет фона HTML страницы равным цвету фона вашего приложения. На примере ниже мы устанавливаем фона на элемент <body> в черный. Задайте в точности те же размеры вашего Silverlight приложения, что вы задекларировали в Page.xaml, иначе разница будет представлена белой рамкой.
 <body style="background-color:Black;margin:0;"> 

    <form id="form1" runat="server" style="height:100%;"> 

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 

        <div> 

            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/FastAnimation.xap" MinimumVersion="2.0.30523" Width="800px" Height="600px" /> 

        </div> 

    </form> 

 </body>

Заключительные замечания:

  • Silverlight предоставляет вам полный контроль над интерфейсным потоком (UI thread). Используйте эту возможность разумно.
  • Не раздувайте ваш код, в особенности XAML.
  • Деактивируйте ваше приложение (останавливайте потоки, фоновые вычисления и т.п.), когда это возможно.
  • При изменении размера кисти (brush resizing), выделяется новая текстура для кисти. Помните это при изменении размеров!
  • Silverlight выводит только измененные блоки, когда работает с анимацией. Избегайте анимации больших размеров.
  • Устанавливайте нужную частоту вывода кадров. Например, для видео устанавливайте это значение в 60, для анимации – 20-30.

 

 

Выдержка из блога Майка Сноу – ссылка на оригинал

Авторские права Майка Сноу. Переведено с разрешения Майка Сноу.