HTML5 Web Worker(多線程處理)
發(fā)布時(shí)間：2023-01-12 16:23:18 作者：xiangxiongfly915 
我要評(píng)論
我要評(píng)論在HTML5中，可以使用Web Worker創(chuàng)建一個(gè)后臺(tái)線程執(zhí)行一個(gè)耗時(shí)任務(wù)，本文主要介紹了HTML5 Web Worker(多線程處理)，感興趣的可以了解一下
概述
JavaScript的執(zhí)行環(huán)境是單線程的，也就是一次只能執(zhí)行一個(gè)任務(wù)。如果遇到多個(gè)任務(wù)時(shí)，只能排隊(duì)依次執(zhí)行。
在HTML5中，可以使用Web Worker創(chuàng)建一個(gè)后臺(tái)線程執(zhí)行一個(gè)耗時(shí)任務(wù)，而不會(huì)影響頁(yè)面響應(yīng)。
簡(jiǎn)單使用
Web Worker技術(shù)基本原理就是：在當(dāng)前JavaScript的主線程中，使用Worker()構(gòu)造函數(shù)新建一個(gè)worker實(shí)例，然后加載某一個(gè)JavaScript文件，發(fā)送給一個(gè)后臺(tái)線程來(lái)處理（注意，這里是后臺(tái)線程）。
worker.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//創(chuàng)建worker
var worker = new Worker("worker.js");
//向后臺(tái)線程發(fā)送數(shù)據(jù)
worker.postMessage("hello world");
//監(jiān)聽(tīng)后臺(tái)線程返回的數(shù)據(jù)
worker.onmessage = function(e) {
console.log("前臺(tái)線程收到：" + e.data);
};
</script>
</head>
<body>
</body>
</html>
worker.js
onmessage = function(e) {
//接收前臺(tái)發(fā)來(lái)的數(shù)據(jù)
var d = e.data;
console.log("后臺(tái)線程收到：" + d);
var str = d.split("").reverse().join("");
postMessage(str);
};
處理復(fù)雜數(shù)據(jù)
worker.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var worker;
window.onload = function() {
var start = document.getElementById("start");
var stop = document.getElementById("stop");
start.onclick = function() {
worker = new Worker("worker.js")
worker.onmessage = function(e) {
console.log("前臺(tái)接收：" + e.data);
}
}
stop.onclick = function() {
worker.terminate();
}
}
</script>
</head>
<body>
<button id="start">開(kāi)始</button>
<button id="stop">停止</button>
</body>
</html>
worker.js
var i = 0;
function handleTask() {
i++;
console.log("handle:" | i);
postMessage(i);
}
setInterval(handleTask, 1000);
到此這篇關(guān)于HTML5 Web Worker(多線程處理)的文章就介紹到這了,更多相關(guān)HTML5 Web Worker內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了HTML5之多線程(Web Worker)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-02淺談Html5多線程開(kāi)發(fā)之WebWorkers
這篇文章主要介紹了淺談Html5多線程開(kāi)發(fā)之WebWorkers的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-02- 這篇文章主要介紹了淺談HTML5 Web Worker的使用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-05
HTML5之web workers_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
專(zhuān)用 Web Worker (Dedicated Web Worker) 提供了一個(gè)簡(jiǎn)單的方法使得 web 內(nèi)容能夠在后臺(tái)運(yùn)行腳本。下面通過(guò)本文給大家分享HTML5之web workers的相關(guān)知識(shí)，需要的的朋友參考2017-07-17- 這篇文章主要介紹了針對(duì)HTML5的Web Worker使用攻略,特別是結(jié)合worker拿手的JS使用起來(lái)十分有效,需要的朋友可以參考下2015-07-12
HTML5 Web Workers之網(wǎng)站也能多線程的實(shí)現(xiàn)
Web Workers 是在HTML5中新增的，用來(lái)在web應(yīng)用程序中實(shí)現(xiàn)后臺(tái)處理的一種技術(shù)2013-04-24突襲HTML5之Javascript API擴(kuò)展1—Web Worker異步執(zhí)行及相關(guān)概述
HTML5 中的 Web Worker 可以分為兩種不同線程類(lèi)型，一個(gè)是專(zhuān)用線程 Dedicated Worker，一個(gè)是共享線程 Shared Worker。兩種類(lèi)型的線程各有不同的用途,感興趣的朋友可以了解2013-01-31
