HTML5中怎么实现多线程

main.js

const worker = new Worker('src/worker.js');
worker.onmessage = e => {
  const message = e.data;
  console.log(`[From Worker]: ${message}`);
  document.getElementById('app').innerHTML = message;
};
worker.postMessage('写的真好!');

Work.js

onmessage = e => {
  const message = e.data;
  console.log(`[From Main]: ${message}`);
  if(message.indexOf('好') > -1) {
    postMessage('谢谢支持');
  }
};

代码很简单，主线程发送：「写的真好！」

web worker 收到消息，发现内容中含有「好」字，回传给主线程：「谢谢支持」

六、局限性

1.在 worker 内，不能直接操作 DOM 节点，也不能使用 window 对象的默认方法和属性。然而我们可以使用大量 window 对象之下的东西，包括 WebSockets ， IndexedDB 以及 FireFox OS 专用的 Data Store API 等数据存储机制。

这里举个例子，我们修改 main.js ：

const worker = new Worker('src/worker.js');
worker.onmessage = e => {
  const message = e.data;
  console.log(`[From Worker]: ${message}`);
  document.getElementById('app').innerHTML = message;
};
+ worker.onerror = function(error) {
+   console.log(error);
+   worker.terminate();
+ };
worker.postMessage('写的真好!');

再来修改 work.js

+ alert('jartto');
onmessage = e => {
  const message = e.data;
  console.log(`[From Main]: ${message}`);
  if(message.indexOf('好') > -1) {
    postMessage('谢谢支持');
  }
};

这时候运行就会报出：

这是因为： worker.js 执行的上下文，与主页面 HTML 执行时的上下文并不相同，最顶层的对象并不是 Window ， woker.js 执行的全局上下文，而是 WorkerGlobalScope ，我们具体说明。

2. workers 和主线程间的数据传递通过这样的消息机制进行：双方都使用 postMessage() 方法发送各自的消息，使用 onmessage 事件处理函数来响应消息（消息被包含在 Message 事件的 data 属性中）。

这个过程中数据并不是被共享而是被复制。

3.同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

4.文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统 （file://） ，它所加载的脚本，必须来自服务器。

5.不允许本地文件

Uncaught SecurityError: Failed to create a worker:
script at '(path)/worker.js'
cannot be accessed from origin 'null'.

Chrome doesn’t let you load web workers when running scripts from a local file.

那如何解决呢？我们可以启动一个本地服务器，建议使用 http-server ，简单易用。

6.内容安全策略

有别于创建它的 document 对象， worker 有它自己的执行上下文。因此普遍来说， worker 并不受限于创建它的 document （或者父级 worker ）的内容安全策略。

我们来举个例子，假设一个 document 有如下头部声明：

Content-Security-Policy: script-src 'self'

这个声明有一部分作用在于，禁止它内部包含的脚本代码使用 eval() 方法。然而，如果脚本代码创建了一个 worker ，在 worker 上下文中执行的代码却是可以使用 eval() 的。

为了给 worker 指定 CSP，必须为发送 worker 代码的请求本身加上一个 CSP。

有一个例外情况，即 worker 脚本的源如果是一个全局性的唯一的标识符（例如，它的 URL 指定了数据模式或者 blob ）， worker 则会继承创建它的 document 或者 worker 的 CSP 。

七、扩展：WorkerGlobalScope

关于 ，我们可以在 MDN 上面找到文档：

1. self ：

我们可以使用 WorkerGlobalScope 的 self 属性来获取这个对象本身的引用。

2. location ：

location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL ，即使页面被多次重定向后，这个 URL 资源位置也不会改变。

3. close ：

关闭当前线程，与 terminate 作用类似。

4. caches ：

当前上下文得 CacheStorage ，确保离线可用，同时可以自定义请求的响应。

5. console ：

支持 console 语法。

6. importScripts
我们可以通过 importScripts() 方法通过 url 在 worker 中加载库函数。

7. XMLHttpRequest
有了它，才能发出 Ajax 请求。

8.可以使用：

• setTimeout/setInterval

• addEventListener/postMessage

还有很多 API 可以使用，这里就不一一举例了。

八、异常处理

当 worker 出现运行中错误时，它的 onerror 事件处理函数会被调用。它会收到一个扩展了 ErrorEvent 接口的名为 error 的事件。该事件不会冒泡并且可以被取消。

为了防止触发默认动作，worker 可以调用错误事件的 preventDefault() 方法。

错误事件我们常用如下这三个关键信息：

• Message：可读性良好的错误消息；

• Filename：发生错误的脚本文件名；

• Lineno：发生错误时所在脚本文件的行号；

worker.onerror = function(error) {
  console.log(error.message);
  throw error;
};

关于HTML5中怎么实现多线程就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。