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

什麼是webworkers

發布時間: 2023-07-22 07:59:18

『壹』 HTML5 Web Worker是利器還是擺設

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

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

『貳』 HTML5(四)——Web Workers

JavaScript 語言是採用單線程模型,也就是任務只能在一個線程上完成,一次只能做一件事,前面任務沒執行完,後面的任務只能排隊等待,由於多核 CPU 的出現,單線程帶來很大不便,無法充分發揮計算機的能力。

Web Worker 就是為了 javascript 創造多線程而生的,主線程創建 worker 子線程,將一些任務分配給後台運行,等到子線程完成計算任務,再把結果返回給主線程,好處是計算密集型或高延遲的任務被 worker 負擔了,主線程就會很流暢。網頁載入展示可分為兩部分:主進程也叫 UI 進程,子進程也叫工作進程,子進程不能控制 UI 進程,只能進行數據交互。

Web Worker 子線程一旦創建成功,就會獨立於其他腳本始終運行,不會被主線程上活動打斷。這樣有利於隨時響應主線程的通信。但是這也造成 Worker 比較耗費資源,不應該過度使用,使用完畢之後應該關閉。

使用 Web Worker 注意點:

2.1 創建Worker線程:

創建worker之前,先檢查瀏覽器是否支持它。使用 typeof 檢查,代碼如下:

檢查瀏覽器支持 worker 之後,主線程使用 new 命令,調用 worker() 構造函數,新建 Worker 線程。

構造函數的參數是一個腳本文件,該文件不能是本地文件,必須來自網路腳本,該文件就是Worker 線程要執行的任務。如果該文件載入失敗,Worker 就會失敗。

2.2 主線程與子線程數據通信:

主線程調用 postMessage() 方法,向 Worker 發消息。postMessage(參數) 方法中參數就是傳給 Worker 的數據,這個數據可以是任意格式。

緊接著 Worker 線程,通過 onmessage 指定監聽函數,接收消息。worker.js 代碼如下:

worker子進程收到消息之後,可以繼續向主進程發送消息,使用 postMessage()。代碼如上。

主進程也通過onmessage監聽函數接收消息。

2.3 Worker線程

Worker線程內部,添加 this.onmessage 監聽函數,其中 this 是子線程的全局對象,也可以替換成 self,self 代表子線程本身。等同於:

除了使用 self.onmessage 指定監聽函數,也可以使用 this.addEventListener() 監聽事件對象。上述 worker.js 代碼可改為:

2.4 錯誤處理

主線程可以監聽Worker是否發生錯誤,如果發生錯誤,Worker 會觸發主線程的 error 事件。

worker 子線程也可以監聽 error 事件。

2.5 關閉 Worker

Worker 比較耗費資源,不應該過度使用,使用完畢之後應該關閉。主線程和子線程都可以關閉。

通常情況下,Worker 載入的是一個單獨的 javascript 文件,但是也可以載入與主線程在同一個網頁的代碼。網頁中添加 Worker 腳本,必須注意指定script標簽的type屬性是一個瀏覽器不認識的值,否則就會失去意義。如:

然後,需要讀取這段代碼,先將嵌入網頁的腳本代碼轉成二進制對象,然後為這個二進制對象生成url,再讓worker載入url,這樣就實現了主進程和worker在同一個網頁內。代碼如下:

Worker構造函數方法:

子進程屬性方法:

Worker() 構造函數,可以接受兩個參數,第一個是腳本的地址,第二個是參數是配置對象,該對象指定Worker的名稱。如:

『叄』 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()

『肆』 web workers 有哪些api

Web Workers 是一種機制,從一個web應用的主執行線程中分離出一個後台線程,在這個後台線程中運行腳本操作。這個機制的優勢是耗時的處理可以在一個單獨的線程中來執行,與此同時,主線程(通常是UI)可以在毫不堵塞的情況下運行。

Web Workers概念和用法
一個worker是一個使用構造函數(例如:Worker())來創建的對象,在一個命名的JS文件裡面運行,這個文件包含了在worker線程中運行的代碼。Workers不同於現在的window,是在另一個全局上下文中運行的。在專用的workers例子中,是由DedicatedWorkerGlobalScope對象代表了這個上下文環境(標准workers是由單個腳本使用的;共享workers使用的是SharedWorkerGlobalScope)。
在worker線程裡面,你可以運行任何你喜歡的代碼,當然也有一些例外。例如,你不能直接操作在worker裡面的DOM,也不能使用window對象的一些默認方法和屬性。但是,你可以使用window下許多可用的項目,包括WebSockets,類似IndexedDB和Firefox OS獨有的Data Store API這樣的數據存儲機制。更多細節請查閱《Functions and classes available to workers》https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
Workers和主線程之間是通過系統消息來傳遞數據的。兩邊使用postMessage()方法來發送消息,通過onmessage事件處理程序來應答(消息是包含在Message事件的數據屬性中。)系統消息是復制數據,不是共享數據。
只要workers和父頁面同源,workers會輪流製造新workers。另外,workers會使用XMLHttpRequest作為網路I/O,但是有一個例外,XMLHttpRequest的responseXML和channel屬性永遠返回null。
除了專用workers,還有其他類型的worker:
l 在不同的windows(例如IFrames)運行的多個腳本可以使用共享workers,只要它們和workder同源就可以。共享workers比專用workers略復雜——腳本必須通過一個活動的埠來通信。預知詳情請看《SharedWorker》https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker
l ServiceWorkders本質上是作為web應用間的代理服務,如果可能的話,作為瀏覽器和網路。ServiceWorkers(除其他事情外)致力於創造有效的離線操作,攔截網路請求,基於網路是否可用和伺服器上更新過的資源進行適當的操作。ServiceWorkers也可以推送通知和後台同步API。