WinJSスケジューラを使用したJavaScript UIフローの管理

翻訳者から：この記事では、Windows 8.1のリリースで更新されたWinJS 2.0ライブラリの新しいタスクスケジューラについて説明しています。 資料の一部を理解するには、遅延結果の処理を理解することが非常に望ましいです（約束）。 非同期JavaScriptプログラミングに関する MSDNセクションを参照してください。



別のWebプロセスとしても実行されるWebワーカーとバックグラウンドタスクは別として、WindowsストアアプリケーションのすべてのJavaScriptコードは、一般的ないわゆるUIスレッドで実行されます。 このコードは、別々のスレッドで操作を実行する非同期WinRT API呼び出しを行うことができますが、留意すべき重要な点が1つあります。これらの非UIスレッドからの結果は、処理のためにUIスレッドに返されます。 つまり、一連のWinRT非同期呼び出し（HTTP要求など）を一度にすべて開始すると、結果がほぼ同時にUIストリームからオーバーロードされる可能性があります。 さらに、ユーザー（またはWinJS）がDOMに要素を追加したり、UIストリームのページレイアウトの更新を必要とするスタイルを変更したりすると、CPUリソースを奪い合うタスクがさらに増えます。 その結果、アプリケーションは「ブレーキ」状態になり、応答しなくなります。



Windows 8では、アプリケーションはこのような影響を減らすためにいくつかの手順を実行できます。たとえば、タイムブロック内で非同期操作を実行してUIストリームへの戻りの頻度を制御したり、ページの更新サイクルを必要とするタスクを組み合わせて1回のパスでより多くの操作を完了したりできます。 Windows 8.1からは、UIストリーム内で直接、異なるタスクに優先順位を付けることが可能になりました。







アプリケーションホストは低レベルスケジューラAPI（ MSApp.executeAtPriority ）を提供しますが、 代わりにWinJS.Utilities.Scheduler APIを使用することをお勧めします。 この推奨の理由は、WinJSがこのスケジューラAPIを介してタスクを管理するためです。これは、同様の方法で管理する作業がWinJSが行う作業と適切に調整されることを意味します。 WinJSスケジューラは、特にプロミスでの作業に関しては、プロセス全体へのシンプルなインターフェイスも提供します。

スケジューラを使用する必要がないことに注意することが重要です。 アプリケーションのパフォーマンスを調整するのに役立ち、人生を複雑にすることはありません！ まず、スケジューラで使用されるさまざまな優先度を見てみましょう。次に、これらの優先度に基づいて作業を計画および管理する方法を見ていきます。



スケジューラを使用する必要がないことに注意することが重要です。 アプリケーションのパフォーマンスを調整するのに役立ち、人生を複雑にすることはありません！ まず、スケジューラで使用されるさまざまな優先度を見てみましょう。次に、これらの優先度に基づいて作業を計画および管理する方法を見ていきます。

スケジューラーの優先順位

WinJSの相対的な優先度は、 Scheduler.Priority列挙で示されます。 降順で 、 max 、 high 、 aboveNormal 、 normal （アプリケーションコードのデフォルト値）、 belowNormal 、 idleおよびminです。 以下は、それらを最適に使用する方法に関する一般的なガイドです。

• max、high-レンダリングプロセス中にページのレンダリングパッセージと重複するため、本当に高い優先度を持つタスクには控えめに使用します。 これらの優先度をあまりにも積極的に使用すると、アプリケーションの応答が遅くなる場合があります。
• aboveNormal、normal、belowNormal-最も重要なタスクの相対的な重要性を示すために使用します。
• idle、min-UIに依存関係を課さない長期実行タスクまたはサポートタスクに使用します。

コードでスケジューラを使用する必要はありませんが、非同期操作の使用を少し分析すると、優先順位付けが大きな役割を果たす場所が明らかになる可能性があります。 たとえば、スプラッシュスクリーンは定義上インタラクティブではないため、スプラッシュスクリーンの表示中に非UI操作を優先したり、セカンダリリクエストをbelowNormalに設定しながら最大または高優先度で最も重要なHTTPリクエストを送信したりできます。 これは、ユーザーがコンテンツと対話する可能性を期待しているホームページが描画される前に、これらの最初の要求を処理するのに役立ちます。その後、バックグラウンドで2次要求を解決できます。 もちろん、ユーザーがセカンダリコンテンツが必要なページに移動する場合、このタスクの優先度をaboveNormalまたはhighに変更できます。



WinJSライブラリ自体は、優先順位付けを積極的に使用します。 たとえば、ソース変更ブロックを解決してデータを高い優先度でバインドし、クリーニングタスクのスケジューリングを優先度idleで実行します。 ListViewなどの複雑なコントロールでは、ListViewの可視部分をレンダリングするために必要な新しい要素の要求は最高の優先度で行われ、可視要素のレンダリングはaboveNormalで行われ、次の要素のページの読み込み （順方向）は通常に行われます （ユーザーがスクロールするという仮定の下で）さらに）、前のページのプリロード（逆ページングの場合）はbelowNormalで行われます 。

スケジューリングとタスク管理

スケジューラーの優先順位がわかったので、UIスレッドでコードを非同期に実行するために必要な優先順位を指定することができます。 これを行うには、 Scheduler.scheduleメソッドを呼び出します（デフォルトの優先順位はnormalです ）。 このメソッドを使用すると、関数内でこれとして使用するオプションのオブジェクトと、ログおよび診断に使用する名前を指定できます。 （ Scheduler.execHighメソッドは、優先度Priority.highの MSApp.execAtPriorityへの直接呼び出しへの短い参照です。このメソッドは追加の引数を取りません。）

簡単な例として、 HTMLスケジューラーの例のシナリオ1では、スケジューラーに、ランダム（js / schedulesjobscenario.js）の異なる優先順位を持つ一連の関数を追加します 。

window.output("\nScheduling Jobs..."); var S = WinJS.Utilities.Scheduler; S.schedule(function () { window.output("Running job at aboveNormal priority"); }, S.Priority.aboveNormal); window.output("Scheduled job at aboveNormal priority"); S.schedule(function () { window.output("Running job at idle priority"); }, S.Priority.idle, this); window.output("Scheduled job at idle priority"); S.schedule(function () { window.output("Running job at belowNormal priority"); }, S.Priority.belowNormal); window.output("Scheduled job at belowNormal priority"); S.schedule(function () { window.output("Running job at normal priority"); }, S.Priority.normal); window.output("Scheduled job at normal priority"); S.schedule(function () { window.output("Running job at high priority"); }, S.Priority.high); window.output("Scheduled job at high priority"); window.output("Finished Scheduling Jobs\n");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果ウィンドウには、「タスク」が呼び出されると、予想される順序で実行されることが示されます。

 Scheduling Jobs... Scheduled job at aboveNormalPriority Scheduled job at idlePriority Scheduled job at belowNormalPriority Scheduled job at normalPriority Scheduled job at highPriority Finished Scheduling Jobs Running job at high priority Running job at aboveNormal priority Running job at normal priority Running job at belowNormal priority Running job at idle priority
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これがあなたにとって驚きではないことを願っています！



スケジュールメソッドを呼び出すと、 Scheduler.IJobインターフェイスを満たすオブジェクトが返されます。これにより、次のメソッドとプロパティが定義されます。

プロパティ

• id-（読み取り専用）スケジューラーによって割り当てられた一意のID。
• name-（読み書き可能）アプリケーションによって提供されたタスクの名前（指定されている場合）（scheduleメソッドのname-attribute）。
• priority-（読み取り/書き込み）スケジューラーにアクセスするときに割り当てられる優先順位。 プロパティを設定すると、優先度が変更されます。
• completed-（読み取り専用）タスクが完了したかどうかを示すブール値（スケジューラーに渡された関数が完了し、すべての依存する非同期タスクも完了します）。
• owner-（読み取り/書き込み）タスクをグループ化するために使用される所有者属性。 デフォルトでは定義されていません。

方法

• pause-タスクのさらなる実行を停止します。
• resume-以前に一時停止したタスクを起動します（タスクが停止していない場合は効果がありません）。
• cancel-スケジューラーからタスクを削除します。

実際には、優先度の低いタスクをスケジュールしているが、レンダリングの開始前にタスクを完了する必要があるページに移動する場合は、 優先度プロパティを更新するだけです（そして、すぐにわかるようにスケジューラをクリアします）。 同様に、ページで何らかの作業を計画していて、別の場所に移動したときに継続する必要がなくなった場合は、ページのアンロードメソッドでタスクのcancelメソッドを呼び出すだけです。 または、開始ページがあり、そこから通常は詳細ページに移動したり、その逆を行ったりすることもできます。 この場合、詳細ページに移動すると開始ページのタスクを一時停止（ pause ）し、戻るときに再開 （ resume ）を続行できます。 デモについては、例のシナリオ2および3を参照してください。



シナリオ2は、 所有者プロパティの使用も示しています（コードは非常に明確であるため、自分で簡単に学習できます）。 所有者属性（トークン）は、 Scheduler.createOwnerTokenメソッドを使用して作成され、タスクの所有者プロパティを介して割り当てられます（これにより、以前の値が置き換えられます）。 所有者の属性は、単一のcancelAllメソッドを持つオブジェクトです。このメソッドは、それが関連付けられているすべてのタスクに対してcancelメソッドを呼び出しますが、それ以外は何もしません。 これは単純なメカニズムで、実際にはタスクの配列をサポートするだけですが、関連するタスクをグループ化し、1回の呼び出しでキャンセルすることができます。 したがって、独自のリストを維持し、このアクションのためにリストを確認する必要はありません。 （一時停止して続行するという同様の決定を行うために、コード内でこのパターンを繰り返すことができます。）



もう1つの重要なスケジューラ機能は、 requestDrainメソッドです。 これにより、UIスレッドに制御を移す前に、この優先度以上のすべてのスケジュールされたタスクが完了することを確認できます。 これは通常、レンダリングの開始前にすべての優先度の高いタスクが完了するようにするために使用されます。 requestDrainは、すべてのタスクが「クリア」されたときに実装される保留中の結果（約束）を返します 。 この時点で、優先度の低いタスクに進むか、新しいタスクを追加できます。



簡単なデモンストレーションは、例のシナリオ5にあります。 異なるタスクの同じセットを計画し、高い優先度または優先度belowNormalで requestDrainを呼び出す2つのボタンがあります。 遅延結果が実行されると、対応するメッセージが表示されます（js / drainingscenario.js）：

 S.requestDrain(priority).done(function () { window.output("Done draining"); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下に示すように、2つの出力を並列に比較すると（左側が高く 、右側が標準以下）、優先順位に応じて遅延結果が異なる時間に表示されることがわかります。

 Draining scheduler to high priority | Draining scheduler to belowNormal priority Running job2 at high priority | Running job2 at high priority Done draining | Running job1 at normal priority Running job1 at normal priority | Running job5 at normal priority Running job5 at normal priority | Running job4 at belowNormal priority Running job4 at belowNormal priority | Done draining Running job3 at idle priority | Running job3 at idle priority
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スケジューラで定義されているもう1つのメソッドは、現在のタスクまたはクリーンアップリクエストの説明を返す診断ツールであるretrieveStateです。 シナリオ5でrequestDrainの直後に呼び出しを追加すると、次の結果が得られます。

 id: 28, priority: high id: 27, priority: normal id: 31, priority: normal id: 30, priority: belowNormal id: 29, priority: idle n requests: *priority: high, name: Drain Request 0
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

延期結果のチェーンにおける優先順位付け

以下に説明するように、各ステップで結果を処理する、順次実行するデータを要求する非同期メソッドのセットがあると想像してください。

 getCriticalDataAsync().then(function (results1) { var secondaryPages = processCriticalData(results1); return getSecondaryDataAsync(secondaryPages); }).then(function (results2) { var itemsToCache = processSecondaryData(results2); return getBackgroundCacheDataAsync(itemsToCache); }).done(function (results3) { populateCache(results3); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトでは、このコードはすべて、UIスレッドで発生する他のすべての背景に対して現在の優先度で実行されます。 ただし、おそらくprocessCriticalData関数を高い優先度で実行し、 processSecondaryDataを 通常モードで動作させ、 populateCacheをidleで動作させたいでしょう。 スケジューラーを直接操作するには、すべてを難しい方法で行う必要があります。

 var S = WinJS.Utilities.Scheduler; getCriticalDataAsync().done(function (results1) { S.schedule(function () { var secondaryPages = processCriticalData(results1); S.schedule(function () { getSecondaryDataAsync(secondaryPages).done(function (results2) { var itemsToCache = processSecondaryData(results2); S.schedule(function () { getBackgroundCacheDataAsync(itemsToCache).done(function (results3) { populateCache(results3); }); }, S.Priority.idle); }); }, S.Priority.normal); }, S.Priority.high); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちの意見では、歯医者に行くことは、そのようなコードを書くよりも楽しいです！ 簡単にするために、新しい優先度を設定するプロセスを別の保留中の結果にラップし、それをチェーンに挿入できます。 これを行う最適な方法は、完了したイベントのハンドラーを動的に生成することです。これにより、チェーンの前のステップの結果が取得され、目的の優先度で実行がスケジュールされ、同じ結果のPromiseオブジェクトが返されます

 function schedulePromise(priority) { //  –  . return function completedHandler (results) { //     ,    //   ,   ... return new WinJS.Promise(function initializer (completeDispatcher) { //       . WinJS.Utilities.Scheduler.schedule(function () { completeDispatcher(results); }, priority); }); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

幸いなことに、このコードを自分で作成する必要はありません。 WinJS.Utilities.Schedulerには、上記のような5つの既製の完了ハンドラーが既に含まれています。 これらのハンドラーは、エラーが発生したときにタスクを自動的にキャンセルします。 これらはそれぞれ、 schedulePromiseHigh 、 schedulePromiseAboveNormal 、 schedulePromiseNormal 、 schedulePromiseBelowNormalおよびschedulePromiseIdleと呼ばれます。



既製の完了ハンドラーを使用すると、次のように、優先順位を変更する保留中の結果のチェーンに正しいメソッド名を挿入するだけです。

 var S = WinJS.Utilities.Scheduler; getCriticalDataAsync().then(S.schedulePromiseHigh).then(function (results1) { var secondaryPages = processCriticalData(results1); return getSecondaryDataAsync(secondaryPages); }).then(S.schedulePromise.normal).then(function (results2) { var itemsToCache = processSecondaryData(results2); return getBackgroundCacheDataAsync(itemsToCache); }).then(S.schedulePromiseIdle).done(function (results3) { populateCache(results3); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明確にするために、これらの関数の使用は、保留中の呼び出しのチェーンに名前を挿入することだけです。 それらを個別の関数として直接呼び出す必要はありません（これは現在のドキュメントで明確に述べられていない場合があります）。

長期にわたるタスク

現時点で確認した作業の例はすべて、特定の優先順位で作業機能を計画し、呼び出し時にその作業を行うという意味で短命です。 ただし、一部のタスクは完了するまでにかなり時間がかかる場合があります。 この場合、UIスレッドで優先度の高い作業をブロックすることはほとんどありません。



このような状況を支援するために、スケジューラーには、 標準以上の優先度で計画されたタスクを並べ替えるための組み込みのインターバルタイマーがあり、タスクが「協調的に」混雑して次の作業ブロックのスケジュールを変更する必要があるかどうかを確認できます。 ここでは、「協力的に」という言葉を明確にする必要があります。タスクの実行を延期させるものは何もありませんが、すべてがアプリケーションのUIのパフォーマンス、およびアプリケーション全体のパフォーマンスに影響するため、そのような状況を適切に処理しないと、自分自身に害を及ぼします！



このような操作の実装メカニズムは、仕事関数自体への引数として渡されるjobInfoオブジェクトを通じて実装されます。 まず、スコープ内の関数で利用可能なものを見てみましょう。これは、基本コード内のいくつかのコメントから理解するのが最も簡単です。

 var job = WinJS.Utilities.Scheduler.schedule(function worker(jobInfo) { //jobInfo.job –   ,    . //Scheduler.currentPriority –    . //this –  ,  . }, S.Priority.idle, this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jobInfoオブジェクトのメンバーは、 Scheduler.IJobInfoインターフェースで定義されます。

プロパティ

• job-（読み取り専用） scheduleから返されるのと同じオブジェクト。
• shouldYield-（読み取り専用）ブール値フラグ。通常、タスクが最初に実行されたときにfalseに設定され、関数をUIスレッドから強制的に外してその作業を再スケジュールする必要がある場合はtrueに変更されます。

方法

• setWorkは、タスクを再スケジュールするための関数です。
• setPromiseは遅延結果であり、スケジューラはタスクが再スケジュールされるまで待機します。再スケジュールの関数は遅延結果の値です。

HTMLスケジューラの例のシナリオ4は、これを使用する方法を示しています。 「Yielding Taskを実行」ボタンをクリックすると、 アイドル優先度のワーカーと呼ばれる関数がスケジューラに追加され、「Complete Yielding Task」ボタンをクリックするまで単純にアイドルサイクルを実行し、 taskCompletedをtrue （js /yieldingscenario.js、2秒間隔で、200ミリ秒に置き換えられます）：

 S.schedule(function worker(jobInfo) { while (!taskCompleted) { if (jobInfo.shouldYield) { //  ,      window.output("Yielding and putting idle job back on scheduler."); jobInfo.setWork(worker); break; } else { window.output("Running idle yielding job..."); var start = performance.now(); while (performance.now() < (start + 200)) { //   ; } } } if (taskCompleted) { window.output("Completed yielding task."); taskCompleted = false; } }, S.Priority.idle);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タスクがアクティブな場合、200msの間「作業」を行い、 shouldYieldプロパティがtrueに 設定されているかどうかを確認します 。 その場合、関数はsetWorkメソッドを呼び出して自分自身（または必要に応じて別の関数）を再スケジュールします。 このような遷移は、例の「優先度の高いタスクをキューに追加」ボタンをクリックすることで、長いタスクが動作している間に誘発できます。 これらのタスク（優先度が高い）が次の作業関数の呼び出しまでどのように機能するかがわかります。 さらに、インターフェイスの任意の場所をクリックして、このアイドルタスクがUIストリームをブロックしないようにすることができます。



必要に応じて、すぐにポップアウトするために、作業関数が最初に降伏する必要があることに注意してください ただし、最初に少し作業を行ってからチェックを行うのは正常です。 繰り返しますが、これはあなた自身のコード内での協力の問題なので、あなたのロックはあなた自身の良心にあります。



setPromiseに関しては 、これはやや微妙なアイデアです。 スケジューラーに対してsetPromiseを呼び出して、タスクを再スケジュールする前に遅延結果が表示されるまで待機します。 さらに、タスクの次の作業関数は、遅延結果の値を介して直接提供されます。 （そのため、 IJobInfo.setPromiseメソッドは 、WinJS内の他のsetPromiseメソッドが行うように非同期操作を管理しません。これは、WinRTの遅延メカニズムに関連付けられています。ランダムな非同期APIからの遅延結果でIJobInfo.setPromiseを呼び出した場合、スケジューラーは、この操作の実行値を使用しようとします—それは、何でも、何でも可能です—関数として、例外につながる可能性があります。



一般的に、 setWorkが「この作業関数でここで再スケジュールを行おう」と言った場合、 setPromiseは「再スケジューリングを少し待って、後で必要な関数を提供するまで待ちます」と言います。 これは通常、このキューを処理するためのタスクを伴う多くのジョブで構成される作業キューを作成するのに便利です。 説明のために、次のコードがあると想像してください。

 var workQueue = []; function addToQueue(worker) { workQueue.push(worker); } S.schedule(function processQueue(jobInfo) { while (work.length) { if (jobInfo.shouldYield) { jobInfo.setWork(processQueue); return; } work.shift()(); //    FIFO-  . } }}, S.Priority.belowNormal);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のスケジューラー呼び出しの時点でキューに何らかの作業があると仮定すると、 processQueueタスクはこのキューを「協力的に」解放します。 また、実行時に新しいジョブがキューに追加されると、 processQueueはさらに実行されるように再スケジュールされます。



ただし、問題は、キューが空になるとprocessQueue関数が終了することです。つまり、キューに追加したジョブは処理されません。 これを修正するには、キューが空の場合でも、 processQueueが定期的にsetWorkを繰り返し呼び出すように強制できますが、それはリソースの浪費になります。 代わりに、 setPromiseを設定して、キューに新しいジョブが表示されるまでスケジューラを待機させることができます。 仕組みは次のとおりです。

 var workQueue = []; var haveWork = function () { }; //   function addToQueue(worker) { workQueue.push(worker); haveWork(); } S.schedule(function processQueue(jobInfo) { while (work.length) { if (jobInfo.shouldYield) { jobInfo.setWork(processQueue); return; } work.shift()(); //     FIFO-  . } //   ,  ,        . // ,   setWork  - ,   , //  ,  addToQueue   ,    ,  // haveWork ,     . jobInfo.setPromise(new WinJS.Promise(function (completeDispatcher) { haveWork = function () { completeDispatcher(processQueue) }; })) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードのフレームワーク内で、 workQueueにいくつかの作業を入れてから、 スケジュール呼び出しを行うとします。 この時点で、さらに、キューが空になるまで、 processQueue関数のwhileループの内側にいます 。 空のhaveWork関数の呼び出しには、追加の操作はほとんど必要ありません。



キューが空になったら、 whileループを終了しますが、 processQueueは終了しません。 代わりに、新しいジョブがキューに追加されるまで待機するようスケジューラーに伝えたいと思います。 そのため、 haveWork関数のスタブがあります。このスタブは、 processQueueの遅延結果を完了する別の関数に置き換えて、作業関数自体の再スケジュールを行うことができます。



同じ目標を達成する別の方法は、次のhaveWork関数の割り当てを使用することです。

 haveWork = completeDispatcher.bind(null, processQueue);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、匿名関数と同じ結果が得られますが、クロージャーは作成されません。

おわりに

WinJS スケジューラ APIを使用すると、アプリケーションは、単一の遅延結果チェーン内のさまざまなタスクを含む、相対的な優先順位でUIスレッド内のさまざまなタスクをスケジュールできます。 この場合、アプリケーションは、タスクをWinJSが同じアプリケーションに対して実行するタスクと自動的に調整します。たとえば、データバインディングとレンダリングコントロールを最適化します。 使用可能な優先順位を慎重に使用すると、アプリケーションは全体的なパフォーマンスとユーザーエクスペリエンスの向上に向けて重要な手順を実行できます。



-クレイグ・ブロックシュミット

プログラムマネージャー、Windowsエコシステムおよびフレームワークチーム

投稿者：「 HTML、CSS、およびJavaScriptを使用したWindowsストアアプリのプログラミング 」、第2版

参照資料

スケジューラクイックスタートガイド

HTMLスケジューラーの例

Visual Studio 2013をダウンロードする