PR

49.HTML5 ウェブワーカーについて

スポンサーリンク

Webワーカーは、ページのパフォーマンスに影響を与えずにバックグラウンドで実行されているJavaScriptです。


スポンサーリンク

Webワーカーとは何ですか?

HTMLページでスクリプトを実行すると、スクリプトが終了するまでページは応答しなくなります。

Webワーカーは、ページのパフォーマンスに影響を与えることなく、他のスクリプトとは関係なくバックグラウンドで実行されるJavaScriptです。
Webワーカーがバックグラウンドで実行されている間も、クリック、モノの選択など、必要なことは何でも続けることができます。


ブラウザのサポート

表内の数字は、Web Workersを完全にサポートする最初のブラウザバージョンを示しています。

API クローム IE/エッジ ファイアフォックス サファリ オペラ
Web ワーカー対応開始のバージョン 4.0 10.0 3.5 4.0 11.5

Webワーカーファイルを作成する

それでは、外部のJavaScriptでWebワーカーを作成しましょう。

ここでは、重要なスクリプトを作成します。スクリプトは “demo_workers.js” ファイルに格納されています。

var i = 0;

function timedCount()
{
 
i = i + 1;
 
postMessage(i);
  setTimeout(“timedCount()”,500);
}

timedCount();

上記のコードの重要な部分はpostMessage()メソッドです。これはHTMLページにメッセージをポストバックするために使用されます。

ノート: 通常、Webワーカーはそのような単純なスクリプトには使用されませんが、よりCPUを集中的に使用するタスクに使用されます。


Webワーカーオブジェクトを作成します。

Webワーカーファイルができたので、HTMLページから呼び出す必要があります。

次の行では、ワーカーがすでに存在するかどうかを確認します。存在しない場合は、新しいWebワーカーオブジェクトを作成し、
“demo_workers.js”のコードを実行します。:

if (typeof(w) == “undefined”) {
  w = new Worker(“demo_workers.js”);
}

その後、Webワーカーとメッセージを送受信できます。

“onmessage” イベントリスナをWebワーカーに追加してください。

w.onmessage = function(event){
  document.getElementById(“result”).innerHTML = event.data;
};

Webワーカーがメッセージを投稿すると、イベントリスナー内のコードが実行されます。Webワーカーからのデータはevent.dataに格納されています。


Webワーカーを終了する

Webワーカーオブジェクトが作成されると、それは終了するまで(外部スクリプトが終了した後でも)メッセージを待機し続けます。

Webワーカーを終了し、ブラウザ/コンピュータのリソースを解放するには、次の
terminate() メソッドを使います 。

w.terminate();

Webワーカーを再利用する

ワーカー変数を未定義に設定した場合は、終了後にコードを再利用できます。

w = undefined;

Full フルWebワーカーのサンプルコード

.jsファイルでワーカーコードを既に見ました。以下はHTMLページのコードです。

例文

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button>

<script>
var w;

function startWorker()
{
 
if (typeof(Worker) !== “undefined”)
{
    if (typeof(w) == “undefined”) {
      w = new Worker(“demo_workers.js”);
    }
    w.onmessage = function(event) {
      document.getElementById(“result”).innerHTML = event.data;
    };
  }
else
{
   
document.getElementById(“result”).innerHTML = “Sorry! No Web Worker support.”;
  }
}

function stopWorker()
{
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>


WebワーカーとDOM

Webワーカーは外部ファイルにあるため、次のJavaScriptオブジェクトにアクセスすることはできません。

  • ウィンドウオブジェクト
  • 文書オブジェクト
  • 親オブジェクト
記事が参考になった方、サイト運営を応援してくれる方へ

下のリンクから楽天トラベルでホテル予約か、楽天市場で商品購入を願いします。応援よろしくお願いします。
リンクを表示すれば楽天トラベルで予約の検索ができます。

リンクを表示すれば、お好きな商品が検索できます。

スポンサーリンク
haruki

ITエンジニア × 副業 × 投資家
副業と投資で年間100万円以上の収益を達成
ブログ・YouTube・投資で複数の収益源を確立

私は、IT業界でクラウドエンジニアとして10年以上の経験を積みながら、副業と投資を実践し、資産を増やしてきました。
このブログでは、 「最短で副業、本業の収益を上げ、資産を最大化する方法」 をリアルな成功事例と失敗談を交えて解説します。

Youneedjp.com の目的

「個人が副業と投資で安定収益を得るための実践ガイド」 を提供

副業・投資・お得なライフハックを 「すぐに実践できるノウハウ」 に特化し、
読者が 「月5万円の副収入」 を最短で得られるようにサポートします。

harukiをフォローする

クラウドファンディングで資金を集めています。運営を応援してくださる方は下のリンクの欲しいものリストからプレゼントお願いします。もちろん、住所、氏名などは匿名で発送できます。

参考になたっらSNSシェア&フォローもよろしくお願いします!質問、お仕事相談など、「X」のDMで気軽にご相談ください。

スポンサーリンク
スポンサーリンク
スポンサーリンク
HTML
スポンサーリンク
参考になった情報は、ぜひシェアお願いします
harukiをフォローする

コメント

タイトルとURLをコピーしました