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

This article mainly explains "how to create the Web Workers of HTML5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to create the Web Workers of HTML5"!

Web worker is a JavaScript that runs in the background and does not affect the performance of the page.

What is Web Worker?

When a script is executed in a HTML page, the state of the page is unresponsive until the script is complete.

Web worker is a JavaScript that runs in the background, independent of other scripts, and does not affect the performance of the page. You can continue to do whatever you want: click, pick content, and so on, while web worker is running in the background.

Browser support

All major browsers support web worker, except Internet Explorer.

HTML5 Web Workers instance

The following example creates a simple web worker that counts in the background:

Count:

Count:

Start to work

Stop Worker

Var w

Function startWorker ()

{

If (typeof (Worker)! = "undefined")

{

If (typeof (w) = = "undefined")

{

W = new Worker ("/ example / html5 / demo_workers.js")

}

W.onmessage = function (event) {

Document.getElementById ("result"). InnerHTML = event.data

}

}

Something else.

{

Document.getElementById ("result"). InnerHTML = "Sorry, your browser does not support Web Workers..."

}

}

Function stopWorker ()

{

W.terminate ()

}

Detect Web Worker support

Before you create a web worker, check if the user's browser supports it:

If (typeof (Worker)! = "undefined")

{

/ / Yes! Supported by network workers!

/ / some code.

}

Something else.

{

/ / Sorry! Web Worker is not supported.

}

Create a network worker

Now, let's create our web worker in an external JavaScript.

Here, we create a count script. The script is stored in the "demo_workers.js" file:

Var I = 0

Function timedCount ()

{

I = I + 1

PostMessage (I)

SetTimeout ("timedCount ()")

}

TimedCount ()

The important part of the above code is the postMessage () method, which is used to return a message to the HTML page.

Note: web worker usually does not use such simple scripts, or for tasks that consume more CPU resources.

Create a Web Worker object

We already have the web worker file, and now we need to call it from the HTML page.

The following code detects whether a worker exists, and if not,-it creates a new web worker object and runs "demo_workers.js"

If (typeof (w) = = "undefined")

{

W = new Worker ("demo_workers.js")

}

Then we can generate and receive messages from web worker.

Add a "onmessage" event listener to web worker:

W.onmessage = function (event) {

Document.getElementById ("result"). InnerHTML = event.data

}

When web worker delivers a message, the code in the event listener is executed.

Terminate the network worker

When we create the web worker object, it continues to listen to the message (even after the external script completes) until it is terminated.

If you terminate the network worker and release the browser / computer resources, use the Terminate () method:

W.terminate ()

Complete Web Worker instance code

We have seen the Worker code in the .js file. Here is the code for the HTML page:

Example

Count:

Start to work

Stop working

Var w

Function startWorker ()

{

If (typeof (Worker)! = "undefined")

{

If (typeof (w) = = "undefined")

{

W = new Worker ("demo_workers.js")

}

W.onmessage = function (event) {

Document.getElementById ("result"). InnerHTML = event.data

}

}

Something else.

{

Document.getElementById ("result"). InnerHTML = "Sorry, your browser

Web Workers is not supported. "

}

}

Function stopWorker ()

{

W.terminate ()

}

Network workers and DOM

Because web worker is in an external file, they cannot access the following example JavaScript object:

Window object

Document object

Parent object

At this point, I believe you have a deeper understanding of "how to create the Web Workers of HTML5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.