![画像](https://habrastorage.org/getpro/habr/post_images/26b/133/75e/26b13375ec100b3f6353cee9a8802845.png)
パフォーマンスは、機能と設計とともに、アプリケーションの最も重要な特性の1つです。 これは、認証プロセスとWindowsストアでのアプリケーションの公開の失敗の一般的な理由の1つです。
優れたアプリケーションは高速で、スムーズに実行され、ハードウェアリソースを経済的に消費する必要があります。 そのためには、デザインと機能だけでなく、パフォーマンスにも注意を払う必要があります。
Visual Studio 2013には、プロファイリングとパフォーマンス分析のための新機能が導入されており、アプリケーションの一般的なボトルネックをすばやく見つけることができます。
プロファイリング機能
Visual Studio 2013では、Windowsストアアプリケーションの既存のプロファイリング機能と追加された新しい機能が、特別なパフォーマンスおよび診断ハブウィザードに転送されました。 開発者は、データを収集し、ハードウェアリソース、インターフェイスパフォーマンス、およびアプリケーションコードの使用を分析できます。
デバッグまたは分析メニューで見つけることができます。
![画像](https://habrastorage.org/getpro/habr/post_images/bd2/cd2/a3c/bd2cd2a3c7abc43ea9fffc11db2a0ff7.png)
![画像](https://habrastorage.org/getpro/habr/post_images/3b1/f48/d8e/3b1f48d8e03a4c25e28cbea8a681bde9.png)
そのため、次のオプションを使用できます。
- CPUサンプリング 。 CPU使用率データの収集。
- エネルギー消費量 。 追加のハードウェアを使用せずに、特にRTデバイスに当てはまるエネルギー消費統計の収集。
- HTML UIの応答性 。 HTML \ JavaScriptアプリケーションのページおよびコントロールの応答時間に関する統計の収集。
- XAML UIの応答性 。 XAML \ C#アプリケーションのページおよびコントロールの応答時間に関する統計の収集。
- JavaScriptメモリ 。 メモリ使用量に関する統計の収集。 JavaScriptアプリケーションでメモリリークを見つけることができます。
- JavaScript関数のタイミング 。 JavaScriptランタイム情報を表示します。
- パフォーマンスウィザード 。 まだ存在します。 主に、クラシッククライアントアプリケーションまたはASP.NETアプリケーションのプロファイリングに使用されます。
スタジオで開かれたアプリケーションだけでなく、インストールされている他のアプリケーション、ASP.NETアプリケーションまたはexeファイルもプロファイルできます。
![画像](https://habrastorage.org/getpro/habr/post_images/872/749/ab3/872749ab3e335aa152ddcf979b9a07bf.png)
すでにインストールされているアプリケーションを選択すると、ローカルコンピューターだけでなく、他のアクセス可能なリモートコンピューターでもプロファイルを作成する機会が与えられます 。
![画像](https://habrastorage.org/getpro/habr/post_images/959/681/7f3/9596817f3bb1cec3c53bb0a856070756.png)
Windows 8.1アプリケーションのプロファイリング
次に、アプリケーションのパフォーマンスの問題を診断するための新機能の使用方法と適用方法を見てみましょう。
単純なおもちゃBubblePopperの例を使用して、プロファイリングの可能性を研究します。
![画像](https://habrastorage.org/getpro/habr/post_images/ac8/c28/76e/ac8c2876e229bcca9036137519d4d4ca.png)
おもちゃは、「天井」に到達する前に「粉砕」する必要があるボールを生成します。
実験のソースコードはこちらからダウンロードできます: http : //sdrv.ms/1bgyAwP
CPU使用率
データ収集
Visual Studio 2013でBubblePopperアプリケーションを開きます。トップメニューから[ 分析 - パフォーマンスと診断 ]を選択します。 開いたウィンドウで、[ CPUサンプリング ]チェックボックスをオンにして、[ 開始 ]ボタンをクリックします。
![画像](https://habrastorage.org/getpro/habr/post_images/3dc/828/a9e/3dc828a9e117874bf19948c010d7f849.png)
アプリケーションが起動し、データ収集が開始されます。
![画像](https://habrastorage.org/getpro/habr/post_images/b28/f4b/e7d/b28f4be7dc09a1fafb4d0dcd9f1138d5.png)
アプリを1分以上使用してから、デバッグとデータ収集を停止します。
分析
分析とデータ処理が完了すると、次の情報ブロックを含むレポートが開きます。
- CPUチャート :アプリケーションによるCPU使用率を示します。 積極的にボールを「押しつぶした」ときは、プロセッサは少しアクティブになりますが、あまりアクティブではありません-少し少なくなります。 レポートには、問題がなく、鋭いピークがあることが示されています。
- ホットパス :アプリケーション呼び出しスタックとメソッド実行時間を表示します。
- 最も個別の作業を行う関数 :最もCPU時間を費やした関数。
![画像](https://habrastorage.org/getpro/habr/post_images/038/2bb/e98/0382bbe984466a33bb28229f59c02da7.png)
犯罪者はいません、とあなたは言います。 注意を払えば、 MainPage.moveBubble_Completedメソッドは他のメソッドよりも長く実行されており、スパークのある特別なアイコンでさえマークされています。 クリックしてください。 関数の詳細レポートが表示されます。
![画像](https://habrastorage.org/getpro/habr/post_images/1f1/253/a65/1f1253a65e72dcf53d6923a1f7ccf27b.png)
私の意見では、機能の詳細はCPUレポートの最も有用な部分です。 このレポートは、メソッドの呼び出し元と呼び出し元を示しています。 しかし、最も興味深いのは、コードのどの行が最も長く実行されているかを正確に示すことです。 これにより、意図的に作業し、検索に多くの時間を費やすことなく、コードの最も遅い部分のみを最適化できます。
消費電力
データ収集
Visual Studio 2013でBubblePopperアプリケーションを開きます。 ソリューションエクスプローラーで MainPage.xaml.csファイルを開き、 moveBubble_Completedメソッドで呼び出しのコメントを解除します。
void moveBubble_Completed(object sender, object e) { … OpenWebSite("http://microsoft.com"); }
これにより、テスト目的でレポートに表示されるhttpトラフィックを生成できます。
次に、トップメニューから[ 分析 - パフォーマンスと診断 ]を選択します。
開いたウィンドウで、[ エネルギー消費 ]チェックボックスをオンにして、[ 開始 ]ボタンをクリックします。
![画像](https://habrastorage.org/getpro/habr/post_images/7ae/c36/68c/7aec3668cd0b749c47566338f5654b63.png)
アプリケーションが起動し、データ収集が開始されます。
![画像](https://habrastorage.org/getpro/habr/post_images/68d/2c0/4ab/68d2c04ab103b0f9024ce1900efc827b.png)
アプリを1分以上使用してから、デバッグとデータ収集を停止します。
分析
分析とデータ処理が完了すると、プロセッサ、ネットワーク、バッテリーの使用に関する情報を含むレポートが開きます。
![画像](https://habrastorage.org/getpro/habr/post_images/090/1ce/8b9/0901ce8b95b02a975c0ad6bf568d2e09.png)
レポートは問題ないように見えますが、実験を実行し、コードを少し最適化して違いを確認しましょう。
MainPage.xamlファイルを開き、 moveBubble_Completedメソッドを次のものに置き換えます。
void moveBubble_Completed(object sender, object e) { Storyboard oldStoryBoard = (Storyboard)sender; Bubble bubble = (Bubble)bubbles[oldStoryBoard]; double? xTo = bubble.DestinationX; double? yTo = bubble.DestinationY; double nextX = BubbleResources.NextXPoint(xTo); double nextY = BubbleResources.NextYPoint(yTo); //Check to see if the buble is off the top of of the screen if (yTo < 0 - bubble.BubbleEllipse.ActualHeight) { //Remove the old storyboard bubbles.Remove(bubble.AnimationStoryboard); //Remove the ellipse from the XAML tree LayoutRoot.Children.Remove(bubble.BubbleEllipse); return; } bubble.XAnimation.From = bubble.DestinationX; bubble.XAnimation.To = nextX; bubble.YAnimation.From = bubble.DestinationY; bubble.YAnimation.To = nextY; bubble.DestinationX = nextX; bubble.DestinationY = nextY; bubble.AnimationStoryboard.Begin(); }
メソッドを最適化し、ネットワークアクティビティの生成を削除しました。 エネルギー消費アプリケーションとデータ収集を再起動しましょう。 その結果、次のレポートを取得します。
![画像](https://onadyw.dm2301.livefilestore.com/y2pvby2Myt6vy-W8nm7d7bWLcSGqAFJBlC4Q_JXzE3-UB-esLBaEwdqprhc8zhbEPJGLt42RB9ZwyasLgQD2NPZEJOIivNRK6O36b0LZ-E0Qeg/13.png?psid=1)
ご覧のとおり、ネットワークリソースの使用が停止し、アプリケーションコードの最適化により、バッテリーの使用量も48%から43%に減少しました。
UIパフォーマンス
データ収集
Visual Studio 2013でBubblePopperアプリケーションを開きます(コードを修正せずにアプリケーションバージョンを開くことをお勧めします)。
トップメニューから、[ 分析 ]-[ パフォーマンスと診断 ]を選択します。 開いたウィンドウで、[ XAML UI応答性 ]ボックスをオンにして 、[ 開始 ]ボタンをクリックします。 HTML \ JavaScriptアプリケーションがある場合、 HTML UI応答性設定があります。
![画像](https://onadyw.dm2301.livefilestore.com/y2p1g0bYAJUn4HHm6K3D7xkFW-SQU1WI7CMEvhS6ZGo6AptstbYRKfyPuXcI3foS1hAH2Bdck6hiQH4PWTxJbuSctffjwYe9CZwNknWAvHePIY/14.png?psid=1)
アプリケーションが起動し、データ収集が開始されます。
![画像](https://onadyw.dm2304.livefilestore.com/y2pq1sLWHrDGFZ6Bz2wHVm3iMxJW99DOVXbP-_OCjBzErPh805Iq6UFXo74LPbCx8suxOvFXWXLKGVZ1gDkaJdzkyhgCh7k7U4aSXaPVxiUzFA/15.png?psid=1)
アプリを1分以上使用してから、デバッグとデータ収集を停止します。
分析
分析とデータ処理が完了すると、ページの読み込み時間、コントロール、コード実行に関する情報を含むレポートが開きます。 これらはすべて、アプリケーションのライフサイクルに関連しています。
![画像](https://onadyw.dm2303.livefilestore.com/y2pax2mrmUGGB29UuF9_1KojXQT2ng0cZBLZzSbGogE7QN-rZ47GIGx_1xXdjkOAgfmSX_CubUZGnMNfOZbl_6dC5D7KYf-ccf3gBtCMfEGrN4/16.png?psid=1)
レポートでは、インターフェイスと比較して、アプリケーションコードの実行に多くのリソースが費やされていることがわかります。
前の例と同じ方法で、コードを実験して最適化しましょう。
MainPage.xamlファイルを開き、 moveBubble_Completedメソッドを次のものに置き換えます。
void moveBubble_Completed(object sender, object e) { Storyboard oldStoryBoard = (Storyboard)sender; Bubble bubble = (Bubble)bubbles[oldStoryBoard]; double? xTo = bubble.DestinationX; double? yTo = bubble.DestinationY; double nextX = BubbleResources.NextXPoint(xTo); double nextY = BubbleResources.NextYPoint(yTo); //Check to see if the buble is off the top of of the screen if (yTo < 0 - bubble.BubbleEllipse.ActualHeight) { //Remove the old storyboard bubbles.Remove(bubble.AnimationStoryboard); //Remove the ellipse from the XAML tree LayoutRoot.Children.Remove(bubble.BubbleEllipse); return; } bubble.XAnimation.From = bubble.DestinationX; bubble.XAnimation.To = nextX; bubble.YAnimation.From = bubble.DestinationY; bubble.YAnimation.To = nextY; bubble.DestinationX = nextX; bubble.DestinationY = nextY; bubble.AnimationStoryboard.Begin(); }
XAML UI Responsivenessアプリとデータコレクションを再起動します。 その結果、次のレポートを取得します。
![画像](https://onadyw.dm2303.livefilestore.com/y2pOtZZ2vHIQuwTqBiAFKVsJQN01fh-0ClkBtSdG4m3pKlJrLqt0VxjsTPjNxG0Kh9QKmtmh1kMIgvRSY7hLwLbyEPFmU-ld0Z9vYgYUkUMBxs/17.png?psid=1)
このレポートは、コードがはるかに高速に動作し始めたことを示しています。
このレポートには別の便利な機能があります。 ページとコントロールのパフォーマンス統計を表示します。 統計を表示するには、「 解析」リンクをクリックします。
![画像](https://onadyw.dm2301.livefilestore.com/y2pmA7X-aVQKkVu-vuIT-zZMrbo6nf5dDUxVaKjeplyFHvUz6cKqh5OgWGAMqMWGA65vWGeWr7X1_5JSYpOoKIcKVEvffLqqMdImpb7JVL9ZqM/18.png?psid=1)
このビューでは、次善のコントロールとコンポーネントを探すのが便利です。
ちなみに、これはPerformance and Diagnostics Hubのすべての機能ではなく、主で最も適用可能で有用な機能です。
おわりに
この記事では、VisualStudio 2013のWindowsストアアプリケーションのパフォーマンスをプロファイリングおよび分析する機能に注目しました。
- CPU使用率。
- 消費電力。
- UIパフォーマンス。
この情報が、あなたがお互いを知り、Visual Studio 2013の機能を使用してWindowsストアアプリケーションのパフォーマンスを向上させるのに役立つことを願っています。
便利な資料
チャンネル9: パフォーマンスと診断ハブ
ビルド2013: Visual Studio 2013を使用したJavaScript Windowsストアアプリの問題の診断
Build 2013: JavaScriptパフォーマンスツールを使用した高性能Webサイトと最新のアプリの開発
ビルド2013: XAMLベースのWindowsストアアプリ用のVisual Studio 2013診断ツール
MSDN: リモートデバイスでリモートプロファイリングを構成する