带你了解Web Worker - 初识篇

哇~到底什么是：Web Worker ？

Web Worker 诞生

JavaScript 是单线程语言，也就意味一次性只能作一件事情。一旦遇到计算密集型或高延迟的任务，在结果出来以前整个UI 层对操做会没有任何反应，这是 UI 线程假死现象。

在这背景下，为了让页面有更好的体验， W3C 在 HTML5 的规范中提出了 Web Worker的概念，容许浏览器经过后台线程来执行复杂的事物或者逻辑。

随着电脑计算能力的加强，尤为是多核 CPU 的出现，因为 JavaScript 是单线程语言的特性，没法充分发挥电脑的计算能力。

而 Web Worker 的出现，给 JavaScript 建立了多线程的机会。主线程能够建立 Worker 线程，将一些任务分配给建立的 Worker 线程运行，此时并不会影响主线程的运行，直到 Worker 线程完成任务，再将结果返回给主线程。

这样好处是，会形成 UI 线程假死现象的任务被 Worker 线程负担了，主线程就会很流畅。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（好比用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通讯。可是，这也形成了 Worker 比较耗费资源，不该该过分使用，并且一旦使用完毕，就应该关闭。

Web Worker 族谱

• 专用 Worker （Dedicated Worker）：自身页面后台帮助运算的增强器。

• 共享 Worker（Shared Worker）：多个页面后台帮助匀速和共享数据的增强器。

Dedicated Worker V.S Shared Worker

A dedicated worker is only accessible by the script that called it.

A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes, or even workers.

专用 Worker 只能被建立的脚本访问，可是共享 Worker 能够被来源不一样的脚本共同访问。

我本身的理解是：前者理解为自身tab的一个后台处理器，增强部分功能，多数是高计算的功能，后者理解为多个tab的一个后台处理器。

Web Worker 注意项

1. 同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
2. DOM 限制：Worker 线程所在的上下文做用域，与主线程不同。因此没法读取主线程所在网页的DOM对象，也没法使用 document 、 window 、parent 这些对象。可是，Worker 线程中有 navigator 和 location 对象。
3. 脚本限制：Worker 线程不能执行alert()和 confirm()方法，但可使用 XMLHttpRequest对象发送AJAX请求。
4. 文件限制：Worker 线程不能访问本地静态文件，如：file://my/file/on/my/computer。

下文直接讲述实操部分，敬请期待。

注：本系列文章涉及Web Worker 只包含 Dedicated Worker 以及 Shared Worker。