ホームページ ウェブフロントエンド H5 チュートリアル HTML5-Web Worker API のコードの詳細説明

HTML5-Web Worker API のコードの詳細説明

Apr 01, 2017 am 11:28 AM

1. 概要
HTML5 Web Worker を使用すると、Javascript プログラムがバックグラウンドで単一のスレッドで時間のかかる計算タスクを多数実行できるようになります。 Web ワーカーは、実行中に DOM に直接アクセスできません。 Web ワーカーは CPU とシステム リソースも消費します。 Web ワーカーとページ間の通信は、Web ワーカーのメソッド postMessage および messageevent を通じて行うことができます。

2. ブラウザは検出をサポートします

 function loadDemo() 
   { 
      
if
 (typeof(Worker) !== "undefined") 
      { 
         
document
.getElementById("support").innerHTML =  
            "Excellent! Your browser supports HTML5 Web Workers"; 
      } 
   }
ログイン後にコピー

3.worker オブジェクト
ワーカー オブジェクトは、window オブジェクト のサブオブジェクトです。次のメソッドがあります:
•Worker(jsFile_URL): コンストラクター、パラメーター。 Web Worker タスクの実行に使用される JavaScript ファイルの URL アドレス。相対アドレスまたは絶対アドレスを指定できます。ワーカーは再帰的に作成できます。ページ上で呼び出されます。
•terminate(): ワーカーを終了します。終了後は再利用できず、再構築のみ可能です。
ページからお問い合わせください。
•close(): ワーカー内で呼び出され、ワー​​カーを終了します。
•importScripts(jsFile_1_URL, jsFile_2_URL, ...): JavaScript ファイルを既存のワーカーに非同期にインポートします。JavaScript はパラメータの順序で実行されます。 Worker スクリプト内で呼び出されます。
•postMessage(msg): ワーカーのページとワーカーの間の通信メソッドを作成します。例:

    // -------------由页面向worker
发送消息
------------------
      document.getElementById("helloButton").
onclick
 = function() { 
         worker.postMessage("Here's a message 
for
 you"); 
      }
      // -------------页面接收来自worker的消息----------------      
      worker.addEvent
List
ener("message", messageHan
dl
er, true); 
      function messageHandler(e) { 
         // process message from worker 
      } 
      // -------------JavaScript
文件处理
来自页面的消息----------------
      addEventListener("message", messageHandler, true);
      function messageHandler(e) { 
         postMessage("worker says: " + e.data + " too"); 
      }
ログイン後にコピー

4.エラー処理

 // -------------在页面处理来自worker的消息----------------
   worker.addEventListener("error", errorHandler, true);
   function errorHandler(e) { 
      console.log(e.message, e); 
   }
ログイン後にコピー

5 ワーカーは DOM に直接アクセスできませんが、timer
を使用します。オブジェクトですが、ウィンドウ オブジェクトの時間関連のメソッドとプロパティを完全に使用でき、また、他のいくつかのプロパティも使用できます。例:

rree

以上がHTML5-Web Worker API のコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles