HTML5WebWorkers怎么實(shí)現(xiàn)網(wǎng)站多線程

這篇文章主要介紹了HTML5 Web Workers怎么實(shí)現(xiàn)網(wǎng)站多線程的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML5 Web Workers怎么實(shí)現(xiàn)網(wǎng)站多線程文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)高明免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Web Workers 是在HTML5中新增的，用來(lái)在web應(yīng)用程序中實(shí)現(xiàn)后臺(tái)處理的一種技術(shù)

在HTML4中，js創(chuàng)建的程序都是單線程的，如果花費(fèi)時(shí)間比較長(zhǎng)的話web界面就會(huì)長(zhǎng)時(shí)間沒有響應(yīng)，最惡劣的情況還會(huì)跳出一個(gè)腳本提示框：

提示腳本運(yùn)行時(shí)間過長(zhǎng)，是否繼續(xù)。。。。于是就引出了本文的主角：Web Workers API

使用這個(gè)API用戶可以非常容易的創(chuàng)建在后臺(tái)運(yùn)行的線程，要?jiǎng)?chuàng)建后臺(tái)程序很簡(jiǎn)單：

復(fù)制代碼

代碼如下:

var worker = new Worker('*.js');

注意：后臺(tái)線程是不能訪問頁(yè)面或者窗口對(duì)象的

可以通過發(fā)送消息和接受消息與后臺(tái)線程傳遞數(shù)據(jù)：

worker.onmessage = function (e) {};

worker.postMessage = function (e) {};

說(shuō)一下求和：

復(fù)制代碼

代碼如下:

<!DOCTYPE html>

<head>

function calculate() {

var num = 10000000000;

var r = 0;

for (var i = 1; i < num; i++) {

r += i;

}

alert(r);

}

calculate();

</script>

</head>

<body>

</body>

</html>

于是我美麗的框給出來(lái)了。。。但使用web worker便不會(huì)：

復(fù)制代碼

代碼如下:

<!DOCTYPE html>

<head>

var worker = new Worker('c.js');

worker.onmessage = function (e) {

alert('和：' + e.data);

};

function calculate() {

var num = 1000000;

worker.postMessage(num);

}

calculate();

</script>

</head>

<body>

</body>

</html>

復(fù)制代碼

代碼如下:

onmessage = function (e) {

var num = e.data;

var r = 0;

for (var i = 1; i < num; i++) {

r += i;

}

postMessage(r);

}

我有時(shí)候就在想，我沒事干嘛計(jì)算那么大的數(shù)字啊。。。。。當(dāng)然這是無(wú)聊的坑爹，但我想有個(gè)場(chǎng)景可能需要用到這個(gè)。

在前面學(xué)習(xí)file api時(shí)，有個(gè)讀取本地文件的操作，若是文件過大會(huì)很慢，不知道這個(gè)可以應(yīng)用上去嗎？二次學(xué)習(xí)時(shí)有必要試試。

與線程進(jìn)行數(shù)據(jù)交互

我們這里完成一個(gè)功能，在前臺(tái)隨機(jī)生成數(shù)組，然后在后臺(tái)計(jì)算能被3整出就返回前臺(tái)打印：

復(fù)制代碼

代碼如下:

主程序

<!DOCTYPE html>

<head>

<style>

span

{

padding: 10px;

}

</style>

$(document).ready(function () {

var worker = new Worker('t1.js');

worker.postMessage('');

worker.onmessage = function (e) {

var arr = e.data.split(';');

for (var i = 0, len = arr.length; i < len; i++) {

var dom = $('<span>' + arr[i] + '</span>');

$('#body').append(dom);

}

});

</script>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

代碼如下:

生成數(shù)組的程序

onmessage = function (e) {

var arr = [];

for (var i = 0; i < 100; i++) {

arr.push(parseInt(Math.random() * 100));

}

var worker = new Worker('t2.js');

worker.postMessage(JSON.stringify(arr));

worker.onmessage = function (e) {

//把挑選結(jié)果發(fā)回前臺(tái)

postMessage(e.data);

};

}

復(fù)制代碼

代碼如下:

判斷數(shù)組所有數(shù)據(jù)是否被3整除

onmessage = function (e) {

var arr = JSON.parse(e.data);

var str = '';

for (var i = 0, len = arr.length; i < len; i++) {

if (parseInt(arr[i]) % 3 == 0) {

if (str != '') str += ';';

str += arr[i];

}

postMessage(str);

close();

};

程序邏輯描述：

這里用了個(gè)線程嵌套

首先執(zhí)行前臺(tái)程序，這里初始化了一個(gè)子線程“t1”用于將100個(gè)數(shù)組初始化

然后子線程t1又初始化了子線程t2（用于遍歷數(shù)組，取出能被3整除的數(shù)字，組成字符串），t1將數(shù)組數(shù)據(jù)傳給t2

t2 接收t1數(shù)據(jù)，計(jì)算后將將字符串轉(zhuǎn)給t1，t1轉(zhuǎn)給前臺(tái)，前臺(tái)執(zhí)行自己的邏輯

流程結(jié)束

關(guān)于“HTML5 Web Workers怎么實(shí)現(xiàn)網(wǎng)站多線程”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“HTML5 Web Workers怎么實(shí)現(xiàn)網(wǎng)站多線程”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：HTML5WebWorkers怎么實(shí)現(xiàn)網(wǎng)站多線程
鏈接URL：http://muchs.cn/article44/ijsdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、動(dòng)態(tài)網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號(hào)、虛擬主機(jī)

聲明：本網(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)

猜你還喜歡下面的內(nèi)容