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

This article mainly introduces the HTML5 Web Workers how to achieve the site multithreading related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this HTML5 Web Workers how to achieve the site multithreading article will have a harvest, let's take a look at it.

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:

Copy the code

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:

Copy the code

The code is as follows:

Function calculate () {

Var num = 10000000000

Var r = 0

For (var I = 1; I < num; iTunes +) {

R + = I

}

Alert (r)

}

Calculate ()

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

Copy the code

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

Copy the code

The code is as follows:

Onmessage = function (e) {

Var num = e.data

Var r = 0

For (var I = 1; I < num; iTunes +) {

R + = I

}

PostMessage (r)

}

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:

Copy the code

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)

}

}

});

Copy the code

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)

}

}

Copy the code

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

This is the end of the article on "how to realize website multithreading in HTML5 Web Workers". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve website multithreading in HTML5 Web Workers". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.