HTML5 's Advanced -12 Web Workers (Overview, API)

I. Overview of WEB Workers

Introduction to Web Workers

-Web Workers is a JavaScript running in the background

-Take advantage of multi-core CPUs

-Very good support for multithreading

-does not affect the performance of the page

-Cannot access Web pages and DOM API

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/4A/wKioL1b7vKGBgKMNAAAm2MCStxE885.png "title=" Web.png "alt=" Wkiol1b7vkgbgkmnaaam2mcstxe885.png "/>

Second, Web Workers API

Web Workers API

-Detect browser support for Web Worker

-Create a Web Worker file

-Create Web Worker Object

-Communicating with a Web Worker

-OnMessage Event: This event listens for messages delivered by Web Worker

-PostMessage () Method: This method is used for Web workder delivery messages

-Terminate Web Worker

Detecting Web Workers

-Before you create a Web Worker, you need to detect whether the user's browser supports

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/4E/wKiom1b7vWrBxg-xAABbUA8MyC0920.png "title=" Web.png "alt=" Wkiom1b7vwrbxg-xaabbua8myc0920.png "/>

Create a Web Worker file

-Create a normal JS file that can be used for Web Worker files

-Web Worker files can invoke events and methods of communication

-OnMessage Events

-PostMessage ()

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/4E/wKiom1b7vj6AueXwAAAq3yOYaoM851.png "title=" Web.png "alt=" Wkiom1b7vj6auexwaaaq3yoyaom851.png "/>

To create a Web Worker object

-In an HTML page, create a WEB worker object from the worker's constructor

var w = new Worker ("Myworker.js");

-Arguments accepted by the Worker's constructor: represents the path to the specified called Web Worker file

Communicating with Web Worker

-OnMessage Events

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/4E/wKiom1b7vuuyB_mmAAAZjvt3njU201.png "title=" Web.png "alt=" Wkiom1b7vuuyb_mmaaazjvt3nju201.png "/>

-Used to listen for WEB Worker delivery messages and receive messages delivered through callback functions

-The passed message can be obtained by the parameter Data property of the callback function

-PostMessage () method

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/4E/wKiom1b7v4KSA52HAAAVmHniML0425.png "title=" Web.png "alt=" Wkiom1b7v4ksa52haaavmhniml0425.png "/>

-Passing message content through the PostMessage () method

Terminate Web Worker

-In an HTML page, the Web worker is terminated by invoking the Terminate () method of the Web Worker object

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/4A/wKioL1b7wICRgmOrAAALlqem9qY691.png "title=" Web.png "alt=" Wkiol1b7wicrgmoraaallqem9qy691.png "/>

Summary: This chapter mainly introduces the next HTML5 Web Workers (Overview, API)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 's Advanced -12 Web Workers (Overview, API)