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

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

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

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

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

使用這個API用戶可以非常容易的創(chuàng)建在后臺運行的線程，要創(chuàng)建后臺程序很簡單：

復(fù)制代碼

代碼如下:

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

注意：后臺線程是不能訪問頁面或者窗口對象的

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

worker.onmessage = function (e) {};

worker.postMessage = function (e) {};

說一下求和：

復(fù)制代碼

代碼如下:

于是我美麗的框給出來了。。。但使用web worker便不會：

復(fù)制代碼

代碼如下:

復(fù)制代碼

代碼如下:

onmessage = function (e) {

var num = e.data;

var r = 0;

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

r += i;

}

postMessage(r);

}

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

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

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

我們這里完成一個功能，在前臺隨機(jī)生成數(shù)組，然后在后臺計算能被3整出就返回前臺打?。?/p>

復(fù)制代碼

代碼如下:

主程序

復(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ā)回前臺

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();

};

程序邏輯描述：

這里用了個線程嵌套

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

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

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

流程結(jié)束

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