當前位置:首頁 » 網頁前端 » webworker實踐
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

webworker實踐

發布時間: 2022-06-12 04:45:48

1. 如何使用html5的web workers開啟多線程

html5 web workers例子 - https://21xrx.com/full_stack/Html/html5_web_workers.html

2. WebWorker是什麼鬼

Web Worker為Web應用程序提供了一種能在後台中運行的方法。通過Web Worker可以生成多個線程同時運行,並保證頁面對用戶的及時響應,完全不會影響用戶的正常操作。

3. 有人實際工作項目中用過web worker嗎

應該用的吧

4. vue-ssr 怎麼使用 web worker

vue-worker的介紹和使用
vue-worker把復雜的web worker封裝起來,提供一套非常簡明的api介面,使用的時候可以說像不接觸worker一樣方便。web worker是通過一個瀏覽器提供的Worker對象來創建的,創建的時候要傳入指定的javascript文件作為worker線程的執行腳本。worker線程內的腳本有一些限制,比如只能拿到window.navigator的信息,不能拿到完整的window對象。重點是,這里我們沒有提供一個js文件傳入worker線程,vue-worker是怎麼做到的呢?它利用了Blob來創建一個可執行的二進制上下文,在通過這個上下文來調用我們傳入的function,就好像在內存中虛擬了一個內容是我們傳入的function的js文件一樣。

5. 在webworker線程中可以使用indexedDB/localstorage嗎

創建web worker
可以使用web workerAPI輕松的創建一個worker實例,例如:
var worker = new Worker("worker.js")
上面個的這行代碼將會載入worker.js這個文件,然後再後台運行。你需要調用Worker()這個構造函數,並將需要在後台執行的文件的URI作為參數。如果你想從worker中得到數據,你需要注冊該worker的onmessage事件處理函數,例如:
var worker = new Worker("router.js");
worker.onmessage = function(event){
console.log("called here form the router");
}
同樣你也可以通過addEventListener來監聽你的worker,
var worker = new Worker("router.js")
worker.addEventListener('message',function(event){
console.log("called here form the router");
},false);
worker.postMessage();//啟動這個worker
web worker能做什麼?不能做什麼?
worker是不能訪問「父」頁面(即創建頁面)的dom,他不能訪問以下任何一個對象:
window 對象
document對象
parent對象
並且最後同樣重要的是,在worker中不能使用依賴以上對象的javascript庫,像jQuery。
由於多線程性質,web worker 只能訪問某些特定的javascript特性。下面這些列表時他可以訪問的
navigator對象
location對象(只讀)
XMLHttpRequest方法
atob()、btoa()方法,可以講base64編碼轉成二進制數據,或逆操作
setTimeout() / clearTimeout() and setInterval() / clearInterval()
mp()
應用程序緩存
可以通過importScripts()方法,導入外部js
創建次級worker 即 worker中創建worker
web worker 的執行
在web worker線程自身中,代碼會自上而下的同步執行,之後他們會進入到事件響應的非同步階段。這樣,就允許將web worker分成兩大類:
注冊了onmessage事件相應程序的web worker,用來長時間執行任務,並且在後台執行。這個web worker是不會推出的,因為他一直監聽新的消息
另一種是沒有注冊onmessage事件的web worker,處理一個獨立的任務(可以從web app 主線程中脫離的),例如抓取和解析超大的json對象。這樣的web worker一點操作結束就會退出。(在某些情況下,如果你注冊了callback處理,那麼將會等待所有的callback結束後再退出。)

6. web workers何時使用

創建一個Worker

通常,與web worker相關的代碼都放在一個獨立的JavaScript文件中。父線程通過在Worker構造函數中指定一個JavaScript文件的鏈接來創建一個新的worker,它會非同步載入並執行這個JavaScript文件。

var primeWorker = new Worker('prime.js');


啟動Worker

要啟動一個Worker,則父線程向worker傳遞一個信息,如下所示:

var current = $('#prime').attr('value');
primeWorker.postMessage(current);
父頁面可以通過postMessage介面與worker進行通信,這也是跨源通信(cross-origin messaging)的一種方式。通過postMessage介面除了可以向worker傳遞私有數據類型,它還支持JSON數據結構。但是,你不能傳遞函數,因為函數也許會包含對潛在DOM的引用。

「父線程和worker線程有它們各自的獨立空間,信息主要是來回交換而不是共享。」
信息在後台運行時,先在worker端序列化,然後在接收端反序列化。鑒於此,不推薦向worker發送大量的數據。

父線程同樣可以聲明一個回調函數,來偵聽worker完成任務後發回的消息。這樣,父線程就可以在worker完成任務後採取些必要的行動,比如更新DOM元素。如下代碼所示:

primeWorker.addEventListener('message', function(event){
console.log('Receiving from Worker: '+event.data);
$('#prime').html( event.data );
});
event對象包含兩個重要屬性:

target:用來指向發送信息的worker,在多元worker環境下比較有用。
data:由worker發回給父線程的數據。
worker本身是包含在prime.js文件中的,它同時偵聽message事件,從父線程中接收信息。它同樣通過postMessage介面與父線程進行通信。

self.addEventListener('message', function(event){
var currPrime = event.data, nextPrime;
setInterval( function(){
nextPrime = getNextPrime(currPrime);
postMessage(nextPrime);
currPrime = nextPrime;
}, 500);
});
在本文例子中,我們尋找下一個最大的質數,然後不斷將結果發回至父線程,同時不斷更新界面以顯示新的值。在worker的代碼中,欄位self和this都是指向全局作用域。Worker既可以添加事件偵聽器來偵聽message事件,也可以定義一個onmessage處理器,來接收從父線程發回的消息。

尋找下一個質數的例子顯然不是worker的理想用例,但是在此選用這個例子是為了說明消息傳遞的原理。之後,我們會挖掘些可以通過web worker獲得益處的實際用例。

7. 用WebSocket,WebWorker和requestAnimationFrame如何實現服務端定時推送隨機數到客戶端

你使用WebSocket就可以達到這個效果。WebWorker是優化的事情,requestAnimationFrame只和顯示有關。
後端@ServerEndpoint的類裡面對應前端的new WebSocket("ws://localhost:8080/websocket");
在後端的定時推送有兩個辦法
1、@OnOpen方法裡面為每個webSocket創建一個線程去做定時及推送
2、@OnOpen將webSocket加入一個SET或者List,服務啟動的時候就啟動一個線程,定時為SET裡面的所有webSocket發送隨機數。

8. HTML5 web worker使用

在workjs中添加document.write("<script language=\"javascript\" src=\"youjs.js\"></script>")這樣寫

9. HTML5 Web Socket和Web Worker的區別以及使用方法

一、WEB SOCKET
1、Web Socket是一種協議、本質上和http、tcp一樣、協議是用來說明數據是如何傳輸的,寫過一個小的在線聊天使用了socket.io、之後總結這個項目
2、Web Socket的前綴有兩種:(1)ws:// 不是加密的、 (2)wss:// 是加密的
3、客戶端和服務端進行Web Socket交互的方式也可以理解為「http握手 tcp數據傳輸」的方式
(1)瀏覽器(支持Websocket的瀏覽器)像HTTP一樣、發起一個請求、然後等待服務端的響應
(2)伺服器返回握手響應、告訴瀏覽器請將後續的數據按照websocket制定的數據格式傳過來
(3)瀏覽器和伺服器的socket連接不中斷、此時這個連接和http不同的是它是雙工的了
(4)瀏覽器和伺服器有任何需要傳遞的數據的時候使用這個長連接進行數據傳遞


HTTP握手:是因為瀏覽器和伺服器在建立長連接的握手過程是按照HTTP1.1的協議發送的、有Request、Request Header、 Response、 Response Header、但是不同的是Header裡面的欄位是有特定含義的
TCP傳輸: 主要體現在建立長連接後、瀏覽器是可以給伺服器發送數據、伺服器也可以給瀏覽器發送請求的、當然它的數據格式並不是自己定義的、是在要傳輸的數據外層有ws協議規定的外層包的

4、數據傳輸過程:websocket的數據傳輸形式是:frame、比如會將一條消息分為幾個frame、按照先後順序傳輸出去、這樣做會有幾個好處
(1)大數據的傳輸可以分片傳輸、不用考慮到數據大小導致的長度標志位不足夠的情況
(2)和http的chunk一樣、可以邊生成數據邊傳遞消息、即提高傳輸效率

5、客戶端使用Web Socket的語法:JavaScript、服務端:多種web框架支持

二、WEB WORKER
1、當在 HTML 頁面中執行腳本時、頁面的狀態是不可響應的、直到腳本已完成、而Web Worker 是運行在後台的 JavaScript、獨立於其他腳本、不會影響頁面的性能、您可以繼續做任何願意做的事情:點擊、選取內容等等、而此時 Web Worker 在後台運行
除了DOM操作之外、理論上任何JS腳本任務都可放入worker中執行;語法上的限制、則是不能跨域訪問JS、worker常用於需要消耗大量時間和CPU資源的復雜計算、以換來前台用戶操作的友好型;換句話說、從用戶體驗上看、提高了服務性能

2、Web Worker使用:(當我們創建 Web Worker 對象後、它會繼續監聽消息(即使在外部腳本完成之後)直到其被終止為止)
(1)通過向 Web Worker 添加一個 "onmessage" 事件監聽器來獲取接受到的消息
(2)發送消息:postMessage()
(3)終止 Web Worker、並釋放瀏覽器/計算機資源: terminate()

10. HTML5 Web Worker是利器還是擺設

Worker能解決兩個問題:解決程序阻塞問題:提升效率。不過Worker還有局限性,它不能操作DOM。解決方法如下:

1、首先在創建之前,檢測所用瀏覽器是否支持它,當前除了IE瀏覽器以外,其它主流瀏覽器都是支持的。