HTML5中怎么實(shí)現(xiàn)多線程
這篇文章將為大家詳細(xì)講解有關(guān)HTML5中怎么實(shí)現(xiàn)多線程，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
成都創(chuàng)新互聯(lián)公司專(zhuān)注于舟山企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購(gòu)物商城網(wǎng)站建設(shè)。舟山網(wǎng)站建設(shè)公司,為舟山等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)
一、明確 JavaScript 是單線程
JavaScript 語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。
聽(tīng)起來(lái)有些匪夷所思，為什么不設(shè)計(jì)成多線程提高效率呢？我們可以假設(shè)一種場(chǎng)景：
假定 JavaScript 同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè) DOM 節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？
作為瀏覽器腳本語(yǔ)言， JavaScript 的主要用途是與用戶互動(dòng)，以及操作 DOM 。
這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題。為了避免復(fù)雜性，從一誕生， JavaScript 就是單線程，這已經(jīng)成了這門(mén)語(yǔ)言的核心特征，估計(jì)短期內(nèi)很難改變。
二、新曙光：Web Worker
單線程始終是一個(gè)痛點(diǎn)，為了利用多核 CPU 的計(jì)算能力， HTML5 提出 Web Worker 標(biāo)準(zhǔn)，允許 JavaScript 腳本創(chuàng)建多個(gè)線程。但是子線程完全受主線程控制，且不得操作 DOM 。
所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變 JavaScript 單線程的本質(zhì)。
Web Workers 是現(xiàn)代瀏覽器提供的一個(gè) JavaScript 多線程解決方案，我們可以找到很多使用場(chǎng)景：
1.我們可以用 Web Worker 做一些大計(jì)算量的操作；
2.可以實(shí)現(xiàn)輪詢，改變某些狀態(tài)；
3.頁(yè)頭消息狀態(tài)更新，比如頁(yè)頭的消息個(gè)數(shù)通知；
4.高頻用戶交互，拼寫(xiě)檢查，譬如：根據(jù)用戶的輸入習(xí)慣、歷史記錄以及緩存等信息來(lái)協(xié)助用戶完成輸入的糾錯(cuò)、校正功能等
5.加密：加密有時(shí)候會(huì)非常地耗時(shí)，特別是如果當(dāng)你需要經(jīng)常加密很多數(shù)據(jù)的時(shí)候（比如，發(fā)往服務(wù)器前加密數(shù)據(jù)）。
6.預(yù)取數(shù)據(jù)：為了優(yōu)化網(wǎng)站或者網(wǎng)絡(luò)應(yīng)用及提升數(shù)據(jù)加載時(shí)間，你可以使用 Workers
來(lái)提前加載部分?jǐn)?shù)據(jù)以備不時(shí)之需。
加密是一個(gè)使用 Web Worker 的絕佳場(chǎng)景，因?yàn)樗⒉恍枰L問(wèn) DOM 或者利用其它魔法，它只是純粹使用算法進(jìn)行計(jì)算而已。隨著大眾對(duì)個(gè)人敏感數(shù)據(jù)的日益重視，信息安全和加密也成為重中之重。這可以從近期的 12306 用戶數(shù)據(jù)泄露事件中體現(xiàn)出來(lái)。
一旦在 Worker 進(jìn)行計(jì)算，它對(duì)于用戶來(lái)說(shuō)是無(wú)縫地且不會(huì)影響到用戶體驗(yàn)。
三、兼容性
四、基本概念
1.首先記得去判斷是否支持
if (window.Worker) {
...
}2.創(chuàng)建一個(gè)新的 worker 很簡(jiǎn)單
const myWorker = new Worker('worker.js');postMessage() 方法和 onmessage 事件處理函數(shù)是 Workers 的黑魔法。
3. postMessage 用來(lái)發(fā)送消息，而 onmessage 用來(lái)監(jiān)聽(tīng)消息
const worker = new Worker('src/worker.js');
worker.onmessage = e => {
console.log(e.data);
};
worker.postMessage('你好嗎!');在主線程中使用時(shí)， onmessage 和 postMessage() 必須掛在 worker 對(duì)象上，而在 worker 中使用時(shí)不用這樣做。原因是，在 worker 內(nèi)部， worker 是有效的全局作用域。
4.異常處理：
worker.onerror = function(error) {
console.log(error.message);
throw error;
};5.終止 worker
worker.terminate();
worker 線程會(huì)被立即殺死，不會(huì)有任何機(jī)會(huì)讓它完成自己的操作或清理工作。
6.在 worker 線程中， workers 也可以調(diào)用自己的 close 方法進(jìn)行關(guān)閉：
close();
五、快速開(kāi)始
為了快速掌握，我們來(lái)做一個(gè)小例子：項(xiàng)目結(jié)構(gòu)如下
├── index.html └── src ├── main.js └── worker.js
Html
<html> <head> <title>Web Work Demo</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> Hello Jartto! </div> <script src="src/main.js"></script> </body> </html>
main.js
const worker = new Worker('src/worker.js');
worker.onmessage = e => {
const message = e.data;
console.log(`[From Worker]: ${message}`);
document.getElementById('app').innerHTML = message;
};
worker.postMessage('寫(xiě)的真好!');Work.js
onmessage = e => {
const message = e.data;
console.log(`[From Main]: ${message}`);
if(message.indexOf('好') > -1) {
postMessage('謝謝支持');
}
};代碼很簡(jiǎn)單，主線程發(fā)送：「寫(xiě)的真好！」
web worker 收到消息，發(fā)現(xiàn)內(nèi)容中含有「好」字，回傳給主線程：「謝謝支持」
六、局限性
1.在 worker 內(nèi)，不能直接操作 DOM 節(jié)點(diǎn)，也不能使用 window 對(duì)象的默認(rèn)方法和屬性。然而我們可以使用大量 window 對(duì)象之下的東西，包括 WebSockets ， IndexedDB 以及 FireFox OS 專(zhuān)用的 Data Store API 等數(shù)據(jù)存儲(chǔ)機(jī)制。
這里舉個(gè)例子，我們修改 main.js ：
const worker = new Worker('src/worker.js');
worker.onmessage = e => {
const message = e.data;
console.log(`[From Worker]: ${message}`);
document.getElementById('app').innerHTML = message;
};
+ worker.onerror = function(error) {
+ console.log(error);
+ worker.terminate();
+ };
worker.postMessage('寫(xiě)的真好!');再來(lái)修改 work.js
+ alert('jartto');
onmessage = e => {
const message = e.data;
console.log(`[From Main]: ${message}`);
if(message.indexOf('好') > -1) {
postMessage('謝謝支持');
}
};這時(shí)候運(yùn)行就會(huì)報(bào)出：
這是因?yàn)椋?worker.js 執(zhí)行的上下文，與主頁(yè)面 HTML 執(zhí)行時(shí)的上下文并不相同，最頂層的對(duì)象并不是 Window ， woker.js 執(zhí)行的全局上下文，而是 WorkerGlobalScope ，我們具體說(shuō)明。
2. workers 和主線程間的數(shù)據(jù)傳遞通過(guò)這樣的消息機(jī)制進(jìn)行：雙方都使用 postMessage() 方法發(fā)送各自的消息，使用 onmessage 事件處理函數(shù)來(lái)響應(yīng)消息（消息被包含在 Message 事件的 data 屬性中）。
這個(gè)過(guò)程中數(shù)據(jù)并不是被共享而是被復(fù)制。
3.同源限制
分配給 Worker 線程運(yùn)行的腳本文件，必須與主線程的腳本文件同源。
4.文件限制
Worker 線程無(wú)法讀取本地文件，即不能打開(kāi)本機(jī)的文件系統(tǒng) （file://） ，它所加載的腳本，必須來(lái)自服務(wù)器。
5.不允許本地文件
Uncaught SecurityError: Failed to create a worker:
script at '(path)/worker.js'
cannot be accessed from origin 'null'.
Chrome doesn’t let you load web workers when running scripts from a local file.
那如何解決呢？我們可以啟動(dòng)一個(gè)本地服務(wù)器，建議使用 http-server ，簡(jiǎn)單易用。
6.內(nèi)容安全策略
有別于創(chuàng)建它的 document 對(duì)象， worker 有它自己的執(zhí)行上下文。因此普遍來(lái)說(shuō)， worker 并不受限于創(chuàng)建它的 document （或者父級(jí) worker ）的內(nèi)容安全策略。
我們來(lái)舉個(gè)例子，假設(shè)一個(gè) document 有如下頭部聲明：
Content-Security-Policy: script-src 'self'
這個(gè)聲明有一部分作用在于，禁止它內(nèi)部包含的腳本代碼使用 eval() 方法。然而，如果腳本代碼創(chuàng)建了一個(gè) worker ，在 worker 上下文中執(zhí)行的代碼卻是可以使用 eval() 的。
為了給 worker 指定 CSP，必須為發(fā)送 worker 代碼的請(qǐng)求本身加上一個(gè) CSP。
有一個(gè)例外情況，即 worker 腳本的源如果是一個(gè)全局性的唯一的標(biāo)識(shí)符（例如，它的 URL 指定了數(shù)據(jù)模式或者 blob ）， worker 則會(huì)繼承創(chuàng)建它的 document 或者 worker 的 CSP 。
七、擴(kuò)展：WorkerGlobalScope
關(guān)于 ，我們可以在 MDN 上面找到文檔：
1. self ：
我們可以使用 WorkerGlobalScope 的 self 屬性來(lái)獲取這個(gè)對(duì)象本身的引用。
2. location ：
location 屬性返回當(dāng)線程被創(chuàng)建出來(lái)的時(shí)候與之關(guān)聯(lián)的 WorkerLocation 對(duì)象，它表示用于初始化這個(gè)工作線程的腳步資源的絕對(duì) URL ，即使頁(yè)面被多次重定向后，這個(gè) URL 資源位置也不會(huì)改變。
3. close ：
關(guān)閉當(dāng)前線程，與 terminate 作用類(lèi)似。
4. caches ：
當(dāng)前上下文得 CacheStorage ，確保離線可用，同時(shí)可以自定義請(qǐng)求的響應(yīng)。
5. console ：
支持 console 語(yǔ)法。
6. importScripts
我們可以通過(guò) importScripts() 方法通過(guò) url 在 worker 中加載庫(kù)函數(shù)。
7. XMLHttpRequest
有了它，才能發(fā)出 Ajax 請(qǐng)求。
8.可以使用：
setTimeout/setInterval
addEventListener/postMessage
還有很多 API 可以使用，這里就不一一舉例了。
八、異常處理
當(dāng) worker 出現(xiàn)運(yùn)行中錯(cuò)誤時(shí)，它的 onerror 事件處理函數(shù)會(huì)被調(diào)用。它會(huì)收到一個(gè)擴(kuò)展了 ErrorEvent 接口的名為 error 的事件。該事件不會(huì)冒泡并且可以被取消。
為了防止觸發(fā)默認(rèn)動(dòng)作，worker 可以調(diào)用錯(cuò)誤事件的 preventDefault() 方法。
錯(cuò)誤事件我們常用如下這三個(gè)關(guān)鍵信息：
Message：可讀性良好的錯(cuò)誤消息；
Filename：發(fā)生錯(cuò)誤的腳本文件名；
Lineno：發(fā)生錯(cuò)誤時(shí)所在腳本文件的行號(hào)；
worker.onerror = function(error) {
console.log(error.message);
throw error;
};關(guān)于HTML5中怎么實(shí)現(xiàn)多線程就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
標(biāo)題名稱(chēng)：HTML5中怎么實(shí)現(xiàn)多線程
網(wǎng)頁(yè)地址：http://aaarwkj.com/article6/jpoeig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)建站、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 那曲做網(wǎng)站的公司越來(lái)越多，我們?cè)撊绾芜x擇？ 2023-02-19
- 做網(wǎng)站的細(xì)節(jié)決定了發(fā)揮的效果 2013-06-18
- 做網(wǎng)站應(yīng)規(guī)避的弊端 2020-11-26
- 泉州做網(wǎng)站：企業(yè)做一個(gè)網(wǎng)站有哪些重要的意義呢？ 2021-09-13
- 做網(wǎng)站seo需要知道的側(cè)重點(diǎn) 2013-08-14
- 企業(yè)建站所需的基本材料 2016-10-18
- 創(chuàng)新互聯(lián)提醒做網(wǎng)站不可涉及的三個(gè)注意問(wèn)題 2021-05-02
- 如何做網(wǎng)站優(yōu)化才能吸引百度蜘蛛 2023-02-23
- 如何做網(wǎng)站運(yùn)營(yíng)才能讓百度愛(ài)上你 2022-08-29
- 如何在做網(wǎng)站時(shí)為優(yōu)化助力？ 2022-07-04
- 關(guān)于做網(wǎng)站的實(shí)用建議 2016-09-04
- 天津做網(wǎng)站之營(yíng)銷(xiāo)型網(wǎng)站建設(shè)如何來(lái)提升品質(zhì) 2023-03-12