html5之web worker

Web Worker

Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用引入了對 Web Worker 的支持。Web Worker API 定義了一種在后臺運行腳本的方法。 Web Worker 是在萬維網聯合會 (W3C) 的?Web Worker 規范中指定的。

從傳統意義上來說,瀏覽器是單線程的,它們會強制應用程序中的所有腳本一起在單個 UI 線程中運行。雖然你可以通過使用文檔對象模型 (DOM) 事件和setTimeout?API 造成一種多個任務同時在運行的假象,但只需一個計算密集型任務就會使用戶體驗急轉直下。

Web Worker API 為 Web 應用程序的創作人員提供了一種方法,用于生成與主頁并行運行的后臺腳本。你可以一次生成多個線程以用于長時間運行的任務。新的 worker 對象需要一個 .js 文件,該文件通過一個發給服務器的異步請求包含在內。

JavaScript
var myWorker = new Worker('worker.js');

往來于 worker 線程的所有通信都通過消息進行管理。主機 worker 和 worker 腳本可以通過?postMessage?發送消息并使用?onmessage?事件偵聽響應。消息的內容作為事件的數據屬性進行發送。

下面的示例創建一個 worker 線程并偵聽消息。

JavaScript
var hello = new Worker('hello.js');
hello.onmessage = function(e) {alert(e.data);
};

worker 線程發送要顯示的消息。

JavaScript
postMessage('Hello world!');

?

與 Web Worker 進行雙向通信

要建立雙向通信,主頁和 worker 線程都要偵聽?onmessage?事件。在以下示例中,Worker 線程在指定的延遲后返回消息。

首先,該腳本創建 worker 線程。

JavaScript
var echo = new Worker('echo.js'); 
echo.onmessage = function(e) {alert(e.data); 
}

消息文本和超時值在表單中進行指定。當用戶單擊提交按鈕時,腳本會將兩條信息以 JavaScript 對象文本的形式傳遞給 worker。為了防止頁面在新的 HTTP 請求中提交表單值,事件處理程序還對事件對象調用?preventDefault。注:你不能將對 DOM 對象的引用發送給 worker 線程。Web Worker 并非可以訪問所有數據。只允許訪問 JavaScript 基元(例如 Object 或 String 值)。

HTML
<script>
window.onload = function() {var echoForm = document.getElementById('echoForm'); echoForm.addEventListener('submit', function(e) {echo.postMessage({message : e.target.message.value,timeout : e.target.timeout.value}); e.preventDefault();}, false); }
</script>
<form id="echoForm"><p>Echo the following message after a delay.</p><input type="text" name="message" value="Input message here."/><br/><input type="number" name="timeout" max="10" value="2"/> seconds.<br/><button type="submit">Send Message</button>
</form>

最后,worker 偵聽消息,并在指定的超時間隔之后將其返回。

JavaScript
onmessage = function(e) 
{setTimeout(function() {postMessage(e.data.message);}, e.data.timeout * 1000);
}

?

在 Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用中,Web Worker API 支持以下方法。

方法描述

void?close()

終止 worker 線程。

void?importScripts(inDOMString...?urls);

導入其他 JavaScript 文件的逗號分隔列表。

void?postMessage(在任何數據中);

從 worker 線程發送消息或發送消息到 worker 線程。

?

Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用支持以下 Web Worker API 屬性:

屬性類型描述
locationWorkerLocation代表絕對 URL,包括protocolhostporthostnamepathnamesearch?和?hash?組件。
navigatorWorkerNavigator代表用戶代理客戶端的標識和?onLine?狀態。
selfWorkerGlobalScopeWorker 范圍,包括?WorkerLocation?和?WorkerNavigator?對象。

?

?

Internet Explorer?10 和使用 JavaScript 的 Windows 應用商店應用支持以下 Web Worker API 事件:

事件描述

onerror

出現運行時錯誤。

onmessage

接收到消息數據。

?

WindowTimers

?

Web Worker API 還支持更新的 HTML5?WindowTimers?功能。

方法描述

void?clearInterval(inlonghandle);

取消由句柄所確定的超時。

void?clearTimeout(inlonghandle);

取消由句柄所確定的超時。

long?setInterval(inanyhandler,inoptionalanytimeout,?inany...args);

計劃在指定的毫秒數之后重復運行的超時。注:你現在可以將其他參數直接傳遞到處理程序。如果處理程序是?DOMString,它被編譯成 JavaScript。將句柄返回到超時。清除?clearInterval。

long?setTimeout(inanyhandler,在可選的任何超時中,在任何... 參數中);

計劃在指定的毫秒數之后運行的超時。注:你現在可以將其他參數直接傳遞到處理程序。如果處理程序是?DOMString,它被編譯成 JavaScript。將句柄返回到超時。清除?clearTimeout。

?

在 IE10 Platform Preview 4 中對 Web Worker 的更新

Internet Explorer?10 Platform Preview Build 4 添加了每個進程 25 個 Web Worker 線程的限制。你可以在腳本中創建更多的 worker,但同時只有 25 個將處于活動狀態。

如果達到最大線程數,創建 worker 將不會引發異常。調用總是成功,你可以添加處理程序并將消息發布給它。但是,在現有的 25 個線程之一變得可用之前,worker 可能不會啟動。

JavaScript
// Coding pattern before IE10 Platform Preview Build 4
try {var worker = new Worker(url);
} catch(ex) {// IE might throw...?
}// After IE10 Platform Preview Build 4
var worker = new Worker(url);
// Continue with confidence...

?

轉載于:https://www.cnblogs.com/dacuotecuo/p/4237810.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:
http://www.pswp.cn/news/260706.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/260706.shtml
英文地址,請注明出處:http://en.pswp.cn/news/260706.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

第4章 Python 數字圖像處理(DIP) - 頻率域濾波9 - 頻率域濾波基礎、頻率域的濾波過程、低通、高通

目錄頻率域濾波基礎頻率域的其他特性頻率域濾波基礎知識頻率域濾波步驟小結空間域和頻率域濾波之間的對應關系頻率域濾波基礎 頻率域的其他特性 頻率域中的濾波過程如下&#xff1a; 首先修改傅里葉變換以在到特定目的然后計算IDFT&#xff0c;返回到空間域 # 頻率域中的其…

C# :試玩EventLog

1. 專門創建Source的Log   創建了Source&#xff0c;log顯示在 Event viewer/Applications and Services logs/ 自定義Source 中&#xff0c;待遇比較高&#xff0c;專門顯示的。 創建Source需要管理員身份&#xff0c;否則Crash。 如果已經打開了 Computer Management,請關閉…

css 宋體_Java前端基礎(一)之html/css

1.1 htmlHTML:超文本標記語言(Hyper Text Markup Language)&#xff0c;標準通用標記語言下的一個應用。HTML 不是一種編程語言&#xff0c;而是一種標記語言 (markup language)&#xff0c;是網頁制作所必備的WEB開發工具&#xff1a;hbuilder/webstorm/vs code/eclpise最簡單…

View Controller Programming Guide for iOS---(七)---Resizing the View Controller’s Views

Resizing the View Controller’s Views A view controller owns its own view and manages the view’s contents. In the process, the view controller also manages the view’s subviews. But in most cases, the view’s frame is not set directly by the view controll…

基于百度地圖js進行地理定位

http://www.mengxiangchaoren.com/jquery.select.position.min.js 使用方法 $("#myCity").renderSelect({posByGps:true,bdAk:BD_AK});轉載于:https://www.cnblogs.com/Brose/p/jquery_select_position.html

C#接口-接口作用

C#接口是一個讓很多初學C#者容易迷糊的東西&#xff0c;用起來好像很簡單&#xff0c;定義接口&#xff0c;里面包含方法&#xff0c;但沒有方法具體實現的代碼&#xff0c;然后在繼承該接口的類里面要實現接口的所有方法的代碼&#xff0c;但沒有真正認識到接口的作用的時候就…

gpio的8種工作模式_Stm32之GPIO工作模式簡介

GPIO的8種工作模式GPIO初始化結構體的時候&#xff0c;必須要配置合適的工作模式&#xff0c;這樣才能使得IO口發揮應有的作用。工作模式大體上共分為輸入輸出兩類&#xff0c;共8種&#xff0c;下面將介紹這8種工作模式。GPIO工作模式輸入模式GPIO_Mode_AIN 模擬輸入 GPIO_Mod…

vagrant,流浪漢,我又來啦。

最近學個DEVOPS2.0&#xff0c;講微服務&#xff0c;容器華&#xff0c;持續部署&#xff0c;很到位&#xff0c;就一個一個工具擼一擼。。。 vagrant&#xff0c;以前接觸過&#xff0c;所以上手快&#xff0c;&#xff0c;哈哈&#xff0c;&#xff0c;用時再具體配置。 virt…

dedecms最新版本修改任意管理員漏洞

此漏洞無視gpc轉義&#xff0c;過80sec注入防御。 補充下&#xff0c;不用擔心后臺找不到。這只是一個demo&#xff0c;都能修改任意數據庫了&#xff0c;還怕拿不到SHELL&#xff1f; 起因是全局變量$GLOBALS可以被任意修改&#xff0c;隨便看了下&#xff0c;漏洞一堆&#x…

第4章 Python 數字圖像處理(DIP) - 頻率域濾波10 - 使用低通頻率域濾波器平滑圖像 - 理想、高斯、巴特沃斯低通濾波器

目錄使用低通頻率域濾波器平滑圖像理想低通濾波器(ILPF)高斯低通濾波器(GLPF)巴特沃斯低通濾波器低通濾波的例子使用低通頻率域濾波器平滑圖像 理想低通濾波器(ILPF) 在以原點為中心的一個圓內無衰減地通過所有頻率&#xff0c;而在這個圓外“截止”所有的頻率的二維低通濾波…

vs2008中combox用法總結

1、判斷是否為空 m_CheckPoint.GetCurSel()-1; 2、清空 m_CheckPoint.ResetContent(); 3、添加 m_CheckPoint.AddString(str); 4、獲取某一索引的值 m_CheckPoint.GetLBText(j,str1);//j為索引&#xff0c;str1為存儲變量 5、刪除某一索引的值 m_CheckPoint.DeleteString(j);//…

bluecam連接步驟說明_廠家詳解旋片式真空泵使用說明

旋片式真空泵是有區分單雙極高速直聯結構的真空泵&#xff0c;是用來對密封容器抽除氣體的基本設備之一。旋片式真空泵的泵與電機連軸&#xff0c;有著高轉速、外型小、結構緊湊、流動性工作方便的優點。本文所使用旋片式真空泵使用說明資料&#xff0c;是臺冠真空泵技術團隊工…

python函數中可變參數的傳遞方式是_Python函數可變參數定義及其參數傳遞方式實例詳解...

本文實例講述了Python函數可變參數定義及其參數傳遞方式。分享給大家供大家參考。具體分析如下&#xff1a; python中 函數不定參數的定義形式如下&#xff1a; 1、func(*args) 傳入的參數為以元組形式存在args中&#xff0c;如&#xff1a; def func(*args): print args >&…

加載中做法

一個網頁在加載時&#xff0c;可給靜態部分加個加載中&#xff0c;而動態部分也即是真正內容用jq來改&#xff0c;這樣就有那個效果了轉載于:https://www.cnblogs.com/yedeying/p/3618815.html

Junit4常用注解

Junit4注解 JUnit4的測試類不用再繼承TestCase類了。使用注解會方便很多。 Before&#xff1a;初始化方法After&#xff1a;釋放資源Test&#xff1a;測試方法&#xff0c;在這里可以測試期望異常和超時時間Ignore&#xff1a;忽略的測試方法BeforeClass&#xff1a;針對所有測…

第4章 Python 數字圖像處理(DIP) - 頻率域濾波11 - 使用高通濾波器銳化圖像

目錄使用高通濾波器銳化圖像由低通濾波器得到理想、高斯和巴特沃斯高通濾波器指紋增強頻域中的拉普拉斯鈍化掩蔽、高提升濾波和高頻強調濾波同態濾波使用高通濾波器銳化圖像 由低通濾波器得到理想、高斯和巴特沃斯高通濾波器 HHP(u,v)1?HLP(u,v)(4.118)H_{HP}(u, v) 1 - H_{…

值類型 引用類型 堆棧 堆 之 異想

看了很多值類型 和 引用類型的文章&#xff08;谷歌能搜索出來的&#xff09;看了越多疑問越大&#xff0c;而這些資料中沒有具體的說明。問題&#xff1a;1、堆棧 和 堆 分別存于計算機的哪個硬件&#xff08;CPU緩存&#xff0c;內存&#xff0c;硬盤&#xff09;&#xff1f…

漫步者lollipods如何調節音量_漫步者MF5擴音器體驗:老師值得入手

對于教師職業來說&#xff0c;保護好嗓子是很重要的。每天為學生操勞&#xff0c;頻繁的講課&#xff0c;很多老師都遇上了喉嚨沙啞的問題。怎么樣才能保護好老師的嗓子呢&#xff1f;“小蜜蜂”是很多老師們的選擇&#xff0c;這種擴音器可以掛在腰間&#xff0c;通過麥克風&a…

數據庫之間數據轉換最快方法

用txt導入的方式是最快的&#xff0c;一般是秒級。 以ACCESS數據庫到SQLite數據庫為例&#xff1a; 第一步&#xff1a;導出ACCESS數據庫到txt文件&#xff1a; 一、將表中數據導出到文本文件&#xff08;TXT&#xff09;&#xff1a; Select * INTO [TEXT;DATABASEE:\TEMP].TE…

pandas刪除某列有空值的行_Python-零基礎學習Pandas知識點整理(2)

DataFrame數據的清洗--預處理操作import pandas as pdimport numpy as np#DataFrame數據框行或列的刪除#df.drop(labelsNone,axis0,indexNone,columnsNone,levelNone,inplaceFalse,error"raise")#labels 表示需要刪除的行或列的標簽&#xff0c;多行或多列用列表傳入…