HTML and CSS Reference
In-Depth Information
Figure 10-3.
Pictorial representation of web worker execution
As shown in the figure, the sequence of execution is as follows:
1.
The user clicks the Start Work button.
2.
postMessage()
is called, and “Hello Worker!” is sent to the worker thread.
3.
The worker's
message
event is raised, and the
ReceiveMessageFromPage()
function
handles it.
4.
postMessage()
is called, and “Hello Page!” is returned to the page.
5.
The page's
message
event is raised, and the
ReceiveMessageFromWorker()
function
handles it.
6.
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()
:
importScripts("Helper1.js");
importScripts("Helper1.js","Helper2.js","Helper3.js");
