Web Worker 补救方法
Web Worker 会修复并发性所造成的问题。Web Worker 是 HTML5 标准用来解决 JavaScript 单线程问题的：它们会在主页以外的独立线程上运行，保留主函数的页面，如保持稳定的 UI。
Web Worker 是一个 JavaScript 文件，它是在后台加载和执行的。这些 worker 允许您动态地加载一个 JavaScript 文件，然后使用一个不影响 UI 的后台进程执行脚本。Web Worker 的访问权限是有限的，它们只能传递字符串。因为 Web Worker 不使用浏览器的 UI 线程，所以它们不能访问 DOM。worker 可以使用
self 和
this 引用来访问 worker 的全局范围。worker 和所在页面的通信是通过事件模型和
postMessage() 方法实现的。
因为 Web Worker 具有多线程的行为，所以它们只支持部分的 JavaScript 特性。Web Worker 能够：
-
访问 navigator 对象
-
使用只读的 location 对象
-
执行
XMLHttpRequest 发送一个 HTTP 或 HTTPS 请求
-
使用这些方法为一个活动设置一个时间或时间间隔
setTimeout()/clearTimeout() 和setInterval()/clearInterval()
-
访问应用程序缓存
-
使用
importScripts() 方法导入外部脚本
-
生成的 Web Worker（子 worker 必须也来源于主页面，并且与父 worker 位于相同的位置。）
Web Worker 有两种：专用 worker 和共享 worker。
专用的 Web Worker
专用的 worker 是与创建它的脚本相连的，并且它可以与其他 worker 或浏览器组件通信。然而，它不能与 DOM 通信。
专用 worker 是通过给新 worker 实例传递一个 JavaScript 文件名而创建的。您可以在构造函数
Worker() 中指定 worker 的执行脚本 URI 来创建一个新的 worker。要创建一个专用 worker，您需要输入下面的代码来创建一个新的专用
Worker 对象：
var worker = new Worker('worker.js');
共享的 Web Worker
共 享的 Web Worker 与专用的 Worker 类似，是无法访问 DOM 的，而且只有有限的窗口属性访问权限。共享 Web Worker 只能与来自相同域的其他共享 Web Worker进行通信。这些 worker 是通过给新的共享 worker 实例传递一个 JavaScript 文件名而创建的。
页面脚本可以与共享的 Web Worker 通信。然而，与专用的 Web Worker 不同，您是通过使用一个
port 对象和附加的一个消息事件处理程序来实现通信的。此外，在使用第一个
postMessage() 之前，您必须调用 port 的
start() 方法。
在收到 Web Worker 脚本的第一条消息时，共享的 Web Worker 就会马上给激活的 port 附加一个事件处理程序。通常，这个处理程序会执行自己的
postMessage() 方法将消息返回给调用代码，然后 port 的
start() 方法就会生成一个启用消息过程。
要创建一个共享的 Web Worker，您必须创建一个
SharedWorker 对象，而不是
Worker 对象。下面的代码创建了一个新的
SharedWorker 对象：
var worker = new SharedWorker('worker.js');
创建一个使用了这两个 API 的页面
您将设计一个包含 Geolocation 和 Web Worker 这两个 API 的基本工作模型的页面。此外，您将使用 Google Map API 将所获得的数据渲染为一幅地图。
这个页面是按图 1 的方式组织的。它包含一个用
<header></header> 标签创建的 Header 区域，一个用
<section></section> 标签创建的 Section 区域，以及一个使用
<aside></aside> 创建的 Aside 区域。
图 1. API 页面布局
<section> 和
<aside> 区域包含了所使用的 API。Section 区域包含 Geolocation API。而 Aside 区域则包含 Web Worker，它会计算质数。
在执行时，这个网页的结果如图 2 所示。要查看地理数据，您首先需要同意共享您的信息。然后，Web Worker 会在页面加载时启动。如果您希望查看所得到的质数，那么要单击
Display Web Worker。
图 2. API 网页
HTML 文件
这个 HTML 文件的开头是一些标准的 HTML5 信息，如清单 1 所示。
<head> 部分包含 Google Maps API 的调用，它将传感器的值设置为 False。使用 Google Maps API 要求您声明是否在应用程序中使用一个传感器来确立位置，如 GPS。您必须在 Google Maps API 应用程序中声明一个值为 True 或 Flase 的传感器参数。
必须声明一个传感器值。<head> 标签也包含用于处理功能和格式化网页的 JavaScript 和 CSS3 文件的链接。
清单 1. HTML 文件的开头
双击代码全选
|
1
2
3
4
5
6
7
8
9
|
<!doctype html>
<html>
<head>
<title>Basic GeoLocation Map & Web Worker Prime Number Calculator</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<LINK href="GeolocationWebWorker.css" rel="stylesheet" type="text/css">
<script src="HTML-Part3-GeolocationWebWorker.js" type="text/javascript"></script>
</head>
|
<body> 标签包含一个
onLoad 事件，它会调用 Geolocation 的初始化函数，如清单 2 所示。这个函数会验证浏览器是否支持 Geolocation。这个初始化函数位于 JavaScript 文件中。如果浏览器支持 Geolocation API，那么这个地图就会被渲染。
清单 2. 初始化 Geolocation
双击代码全选
|
1
2
3
4
5
6
7
|
<body onLoad="initGeoApp();">
<header>
<hgroup>
<h1>Geolocation & Web Worker</h1>
<h2>Making it work</h2>
</hgroup>
</header>
|
清单 3 所示的
<section> 标签包含了
navigator.geolocation 对象的显示输出信息。然后它会使用 API 返回的经度和纬度创建一个地图画布。
Position coords 数据则通过
<span></span> 标签显示。
清单 3. Geolocation 地图和位置
(责任编辑：12图资源库)
