HTML5 Web Workers website can also be implemented with multi-threading_html5 tutorial skills

Web Workers are new in HTML5 and are a technology used to implement background processing in web applications

In HTML4, programs created by js are all single-threaded. If it takes a long time, the web interface will not respond for a long time. In the worst case, a script prompt box will pop up:

Prompt that the script is taking too long to run. Do you want to continue? . . . This brings us to the protagonist of this article: Web Workers API

Using this API, users can easily create threads running in the background. To create a background program is very simple:

Copy code

The code is as follows:

var worker = new Worker('*.js');
Note: The background thread cannot access the page or window object
It can be sent by Messages and receiving messages and passing data with background threads:
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};

Please tell me And:

Copy the code

The code is as follows:

< ;body>

So my beautiful frame came out. . . But using web worker will not:

Copy the code

The code is as follows:

< ;!DOCTYPE html>

Copy code

The code is as follows:

onmessage = function (e) {
var num = e.data ;
var r = 0;
for (var i = 1; i < num; i ) {
r = i;
}
postMessage(r);
}

I sometimes wonder, why do I calculate such big numbers when I have nothing to do? . . . . Of course it's a boring gimmick, but I thought there was a scenario that might call for it.

When I was learning the file api earlier, there was an operation to read local files. If the file is too large, it will be very slow. I wonder if this can be applied? It is necessary to try it when learning for the second time.

Interacting data with threads

We complete a function here, randomly generate an array in the foreground, and then calculate in the background that it can be divided into 3 and return to the foreground for printing:

Copy code

The code is as follows:

主程序

复制代码

代码如下:

生成数组的程序
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) {
//把挑选结果发回前台
postMessage(e.data);
};
}

复制代码

代码如下:

判断数组所有数据是否被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();

};

程序逻辑描述：

这里用了个线程嵌套

首先执行前台程序，这里初始化了一个子线程“t1”用于将100个数组初始化

然后子线程t1又初始化了子线程t2（用于遍历数组，取出能被3整除的数字，组成字符串），t1将数组数据传给t2

t2 接收t1数据，计算后将将字符串转给t1，t1转给前台，前台执行自己的逻辑

流程结束

结语

简单来说，我这里就是声明子线程，然后发送数据给子线postMessage，然后等待结果皆可。

这里看来，结合上次的通信API Web Sockets ，可以将2个结合做一个网页聊天程序，甚至还可以将本地存储/本地数据库一些东西用到。

这个样子可能是个不错的东西。