Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to implement the website multithreading in HTML5 Web Workers. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Web Workers is a new technology in HTML5 to implement background processing in web applications.

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

Prompt the script to run for too long, whether to continue. So it leads to the protagonist of this article: Web Workers API

Using this API user, it is very easy to create threads that run in the background, and it is easy to create daemons:

The code is as follows:

Var worker = new Worker ('* .js')

Note: background threads cannot access pages or window objects

You can pass data to background threads by sending and accepting messages:

Worker.onmessage = function (e) {}

Worker.postMessage = function (e) {}

Let's talk about summation:

The code is as follows:

Function calculate () {

Var num = 10000000000

Var r = 0

For (var I = 1; I

So my beautiful frame was given out. However, using web worker will not:

The code is as follows:

Var worker = new Worker ('c.js')

Worker.onmessage = function (e) {

Alert ('and:' + e.data)

}

Function calculate () {

Var num = 1000000

Worker.postMessage (num)

}

Calculate ()

The code is as follows:

Onmessage = function (e) {

Var num = e.data

Var r = 0

For (var I = 1; I

I sometimes wonder why I have nothing to do with calculating such a big number. Of course it's boring, but I think there's a scene that might need this.

In the previous study of file api, there is an operation to read the local file, if the file is very slow, do not know this can be applied? It is necessary to try it for the second time.

Data interaction with threads

We complete a function here, randomly generate an array in the foreground, and then return to the foreground to print if the calculation can be completed by 3 in the background:

The code is as follows:

Main program

Span

{

Padding: 10px

}

$(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; iTunes +) {

Var dom = $(''+ arr [I] +'')

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

}

}

});

The code is as follows:

A program that generates an array

Onmessage = function (e) {

Var arr = []

For (var I = 0; I < 100; iTunes +) {

Arr.push (parseInt (Math.random () * 100))

}

Var worker = new Worker ('t2.js')

Worker.postMessage (JSON.stringify (arr))

Worker.onmessage = function (e) {

/ / send the selection results back to the front desk

PostMessage (e.data)

}

}

The code is as follows:

Determine whether all data in the array is divisible by 3.

Onmessage = function (e) {

Var arr = JSON.parse (e.data)

Var str =''

For (var I = 0, len = arr.length; I < len; iTunes +) {

If (parseInt (arr [I])% 3 = = 0) {

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

Str + = arr [I]

}

}

PostMessage (str)

Close ()

}

Program logic description:

A thread nesting is used here.

First execute the foreground program, where a child thread "T1" is initialized to initialize 100 arrays

Then the child thread T1 initializes the child thread T2 (for traversing the array, taking out the numbers divisible by 3 to form a string), and T1 passes the array data to T2

T2 receives T1 data, and after calculation, the string is transferred to T1 <... > to the front desk, and the front desk performs its own logic.

End of process

To put it simply, here I declare the child thread, then send the data to the child line postMessage, and then wait for the result.

Here, it seems that, combined with the last communication API Web Sockets, you can combine the two into a web chat program, and even use something for local storage / local database.

This might be a good thing.

After reading the above, do you have any further understanding of how to implement website multithreading in HTML5 Web Workers? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.