HTML and CSS Reference
Figure 10-3. Pictorial representation of web worker execution
As shown in the figure, the sequence of execution is as follows:
The user clicks the Start Work button.
2. postMessage() is called, and “Hello Worker!” is sent to the worker thread.
The worker's message event is raised, and the ReceiveMessageFromPage() function
4. postMessage() is called, and “Hello Page!” is returned to the page.
The page's message event is raised, and the ReceiveMessageFromWorker() function
An alert box is shown to the user.
Importing External Script Files
In the preceding example, the entire processing logic was included in a single file. At times, your
processing logic may reside in different script files. In a normal web page, one or more <script> tags point
to the files and consume their functionality. However, the same trick doesn't work with web workers
because web workers don't have access to any DOM elements, including <script> .
There is an alternative with web workers: the importScripts() function. You use importScripts() in
the script file intended to run on a worker thread. The importScripts() function takes a comma-separated
list of script files that you wish to refer to and imports them into the current file in synchronous fashion.
The files are executed in the order you specify when calling importScripts() . The following code shows a
sample usage of importScripts() :