従来、Webアプリケーションは単一のスレッドの世界に限定されてきた.これは、複雑すぎるものがアプリケーションUIを凍結するリスクがあるため、開発者のコードでの行動を制限しています.マルチスレッドをWebアプリケーションに導入することで、Web Workersはこの不利な局面を逆転させた.これは、ほとんどのアプリケーションロジックがクライアントにあるモバイルWebアプリケーションにとって特に有用です.この文書では、Web Workersの使用方法と、どのタスクが最適であるかについて説明します.また、他のHTML 5テクノロジーを使用して、それらのテクノロジーの効率を向上させる方法も見られます.
スタート
この文書では、最新のWebテクノロジーを使用してWebアプリケーションを開発します.ここのコードの大部分はHTML、JavaScript、CSS-すべてのWeb開発者のコアテクノロジーにすぎません.必要な最も重要なツールは、テストを行うブラウザです.この文書では、ほとんどのコードが最新のデスクトップブラウザで実行されますが、いくつかの例外もあります.ここで説明します.もちろん、モバイルブラウザでテストする必要があります.そのためには、最新のiPhoneとAndroid SDKsが必要です.本稿では、iPhone SDK 3.1.3とAndroid SDK 2.1を使用します.この例では、ブラウザからリモート・サービスにアクセスするためにプロキシ・サーバも使用します.このプロキシサーバは簡単なJavaです™ servletですが、PHP、Ruby、その他の言語で書かれたエージェントで簡単に置き換えることもできます.リンクを取得します.
モバイルデバイス上のマルチスレッドJavaScript
多くの開発者にとって、マルチスレッドまたは同時プログラミングは新鮮ではありません.しかし、JavaScriptは同時プログラミングをサポートする言語ではありません.JavaScriptの作成者は、JavaScriptのようなWebページ上で簡単なタスクを実行するための言語では、同時プログラミングに問題が発生しやすく、必要ないと考えています.しかしながら,WebページがWebアプリケーションとして発展しているため,JavaScriptを用いて完了するタスクの複雑さが大幅に増加し,JavaScriptに他言語と同等の要求がなされている.同時に、他の同時プログラミングをサポートする言語作業を使用する開発者は、スレッドやmutexesのような同時原語に伴う超高複雑性に直面することが多い.実際、最近はScala、Clojure、F#のようないくつかの新しい言語が発展しており、同時性を簡素化する可能性があります.
Web Worker仕様は、JavaScriptとWebブラウザに同時性を追加するだけでなく、開発者の能力を高める知恵のある方法で追加されますが、問題を引き起こすツールは提供されません.たとえば、デスクトップアプリケーション開発者は、アプリケーションが複数のI/Oリソースにアクセスすることをサポートするために、複数のスレッドを使用して、これらのリソースを待っている間にUIを凍結しないようにしてきました.しかし、これらのマルチスレッドが共有リソース(UIを含む)を変更すると、このようなアプリケーションでは、アプリケーションが凍結またはクラッシュする可能性があるため、通常問題が発生します.Web Workersがあれば、このようなことは起こりません.デリバティブスレッドは、プライマリUIスレッドがアクセスするリソースにアクセスできません.実際、デリバティブスレッドのコードは、プライマリUIスレッドが実行するコードと同じファイルに存在することもできません.
リスト1に示すように、コンストラクション関数の一部として適切な外部ファイルを指定する必要があります.
このプロセスでは、3つのリソースが使用されます.

メインスレッド上で実行されるWebページJavaScript(ページスクリプトと呼ぶ)

WorkerオブジェクトWeb Worker関数を実行するJavaScriptオブジェクトです.

は、新しい派生スレッド上で実行されるスクリプトです.Workerスクリプトと呼びます.

まず、リスト1のページスクリプトを見てみましょう.
リスト1.ページ・スクリプトでのWeb Workerの使用

var worker = new Worker("worker.js");

 worker.onmessage = function(message){ // do stuff };

 worker.postMessage(someDataToDoStuffWith);

インベントリ1には、Web Workersを使用する3つの基本手順が表示されます.まず、Workerオブジェクトを作成し、新しいスレッドで実行されるスクリプトのURLを渡します.Workerが実行するすべてのコードは、このWorkerのコンストラクション関数に渡されるWorkerスクリプトに含まれる必要があります.このWorkerスクリプトのURLは、ブラウザの同源ポリシーによって制限されます.このWeb Workerを作成しているページスクリプトをロードしているページの同じドメインからロードする必要があります.
次に、onmessage関数を使用してコールバックプロセッサ関数を指定します.このコールバック関数は、Workerスクリプトの実行後に呼び出されます.messageは、Workerスクリプトから返されたデータであり、メッセージを任意に処理できます.コールバック関数はメインスレッド上で実行されるため、DOMにアクセスできます.Workerスクリプトは、異なるスレッド内で実行され、DOMにアクセスできないため、このWorkerスクリプトからのデータをプライマリ・スレッドに戻す必要があります.そこで、DOMを安全に変更してアプリケーションのUIを更新できます.これは、Web Workersの共有されていない設計の重要な特性です.
インベントリ1の最後の行は、WorkerのpostMessage関数を呼び出して起動する方法を示しています.ここで、Workerにメッセージを伝えます(データのみであることを再確認してください).もちろん、postMessageは非同期関数です.呼び出すとすぐに戻ります.
次に、このWorkerスクリプトを確認します.インベントリ2のコードは、インベントリ1のworker.jsファイルからの内容である.
リスト2.Workerスクリプト

importScripts("utils.js");

 var workerState = {};

 onmessage = function(message){ workerState = message.data;

 // do stuff with the message postMessage({responseXml: this.responseText}); }

このWorkerスクリプトは、独自のonmessage関数を持っていることがわかります.この関数は、メインスレッドからpostMessageを呼び出すと呼び出されます.ページスクリプトから渡されたデータは、messageオブジェクトのpostMessage関数に渡される.このデータにアクセスするには、messageオブジェクトのdataプロパティを取得します.Workerスクリプトのデータの処理が完了すると、postMessage関数を呼び出してプライマリ・スレッドにデータを返します.プライマリ・スレッドは、受信したメッセージのdataプロパティにアクセスすることによって、データにアクセスすることもできます.
これで、Web Workersのこの簡単で強力な意味をご覧になりました.次に、この意味を適用してモバイルWebアプリケーションを高速化する方法について説明します.その前に、デバイスサポートについて議論する必要があります.結局、これらはモバイルWebアプリケーションであり、異なるブラウザ間の機能の違いを処理することはモバイルWebアプリケーションの開発にとって重要である.
デバイスのサポート
Android 2.0から、AndroidブラウザはHTML 5のWeb Worker仕様を全面的にサポートしています.この文書を作成する際、最新のAndroidデバイス(非常に流行しているMotorola Droidを含む)はAndroid 2.1を構成しています.また、この機能は、Maemoオペレーティングシステムを実行するNokiaデバイス上のMozilla FennecブラウザおよびWindows Mobileデバイス上で完全にサポートされています.ここで注意しなければならない漏れはiPhoneです.iPhone OS 3.1.3および3.2版(iPad上で動作するOSのバージョン)では、Web Workersはサポートされていません.ただし、この機能はSafariでサポートされているため、iPhone上で動作するMobile Safariブラウザで発生するのは時間の問題にすぎないはずです.iPhoneの主導的な地位(特に米国)に鑑みて、Web Workersの存在に依存しないほうがいいです.また、それらの存在を検出したときだけ、モバイルWebアプリケーションを強化するために使用しないほうがいいです.これに気づいたら、Web Workersを使用してモバイルWebアプリケーションを高速化する方法を見てみましょう.
 
Workersによるパフォーマンスの向上
スマートフォンのブラウザ上のWeb Workerのサポートは非常によく、改善されています.モバイルWebアプリケーションでWorkersを使用する必要があるのはいつですか?答えは簡単です.時間のかかるタスクを完了する必要がある場合はいつでも.一部の例では、1万桁の円周率の計算など、Workersを密集した数学計算に使用する方法を示しています.Webアプリケーションでこのような計算を実行する必要はありません.モバイルWebアプリケーションでこの計算を実行する確率は低いかもしれません.ただし、リモートリソースからデータを取得するのはよくあります.これも本例の注目点です.
この例では、eBayからDaily Deals(毎日変化するトランザクション)のリストを取得します.このトランザクションリストには、各トランザクションに関する簡単な情報が含まれています.より詳細な情報はeBayのShopping APIを使用して取得できます.ユーザーがこの取引リストを参照して興味のある商品を選択すると、Web Workersを使用してこの追加情報をプリフェッチします.WebアプリケーションからこれらのeBayデータにアクセスするには、ブラウザの同源ポリシーを処理するために汎用エージェント(generic proxy)を使用する必要があります.簡単なJava servletは、本明細書のコードに含まれているが、ここでは単独で示されないプロキシに使用されます.逆に,Web Workersのコード処理に集中する.リスト3には、このトランザクションアプリケーションの基本HTMLページが示されています.
リスト3.トランザクションアプリケーションHTML

 
   
 
  
 
  
 
  
 
  
 
  
 
  
  
  
 
Deals
 
  
 
  
 
More Deals
  
 
  
 
  
 
  
 
  
これは  に  なHTMLであることがわかります.それはただのshellです.JavaScriptを  してデータを  し、UIを  します.これは、すべてのコードと  タグをデバイスにキャッシュできるため、ユーザーがサーバからのデータを つだけで むモバイルWebアプリケーションの     です.インベントリ3では、そのbodyがロードされると、loadDeals  が び され、インベントリ4のアプリケーションの  データがロードされます.
  
  
  はHTML 5    サイトから  した.http://www.html5cn.org/article-1506-1.html 
   :https://www.cnblogs.com/html5cn/archive/2012/01/05/2313517.html