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