JavaScript Web Workers的构建块及5个使用处景

发布时间：12/01 来源：未知浏览：关键词：

Broadcast Channel

Broadcast Channel API 同意统一原始域和会员代理下的所有窗口,iFrames 等停止交互。也就是说，假如会员翻开了统一个网站的的两个标签窗口，假如网站内容发生了转变，那么两个窗口会同时得到更新通知。

还是不清楚？就拿 Facebook 作为例子吧，假设你此刻已经翻开了Facebook 的一个窗口，但是你此时还没有登录，此时你又翻开别的一个窗口停止登录，那么你就可以通知其他窗口/标签页去告诉它们一个会员已经登录了并恳求它们停止响应的页面更新。

// Connection to a broadcast channel
var bc = new BroadcastChannel('test_channel');

// Example of sending of a simple message
bc.postMessage('This is a test message.');

// Example of a simple event handler that only
// logs the message to the console
bc.onmessage = function (e) { 
  console.log(e.data); 
}

// Disconnect the channel
bc.close()

可以从下面这张图，在视觉上来清楚地感受 Broadcast Channel：

Broadcast Channel 阅读器支撑比力有限:

新闻的大小

有两种方式发送新闻给Web Workers:

复制新闻:新闻被序列化、复制、发送，然后在另一端反序列化。页面和 Worker 不同享雷同的实例，因此终究的结果是每次传递都会创立一个副本大多数阅读器，在两边都是使用的JSON对值停止编码和解码，这样对数据的解码、编码操纵，势必会增添新闻传输历程的时间开销。信息越大，发送的时间就越长。
传递新闻:这意味着原始发送方在一旦发送后不克不及再使用它。传输数据几乎是瞬时的，这种传输方式的局限性在于只能用 ArrayBuffer 类型来传递。

Web Workers 可用的特性

由于 JavaScript的多线程特性，Web工作者只能拜访JavaScript特性的一个子集。以下是它的一些特点:

Web Workers 由于具有多线程特性，因此只能拜访 JavaScript 特性的子集。以下是可使用特性列表：

navigator 对象
location 对象(只读)
MLHttpRequest
setTimeout()/clearTimeout() and setInterval()/clearInterval()
利用缓存(Application Cache)
使用 importScripts() 导入外部足本
创立其他的 Web Workers

Web Workers 的局限性

遗憾的是，Web Workers 没法拜访一些非常关键的 JavaScript 特性:

DOM(它会造成线程不平安)
window 对象
document 对象
parent 对象

这意味着 Web Worker 不克不及操纵 DOM (因此也不克不及操纵 UI)。有时这大概很棘手，但是一旦你理解了怎样准确使用 Web Workers，你就会开端将它们作为独自的“运算机”使用，而所有 UI 更换都将发生在你的页面代码中。 Workers 将为你完成所有沉重的工作，然后一旦完成再把结果返回给 page 页面。

处置错误

和 JavaScript 代码一样，Web workers 里抛出的错误，你也需要停止处置。当 Worker 施行历程中假如碰到错误，会触发一个 ErrorEvent 事件。接口包括了三个有用的属性来帮助排查问题：

filename - 致使 Worker 的足本名称
lineno - 发生错误的行号
message - 对错误的描写

例子如下：

在这里，可以看到我们创立了一个 worker 并开端侦听错误事件。

在 worker 内部(在 workerWithError.js 中)，我们通过将不决义 x 乘以 2 来创立一个非常。非常被传播到初始足本，然后通过页面监听 error事件，对错误停止捕捉。

5个好的 Web Workers 利用实例

到当前为止，我们已经列出了 Web Workers 的长处和局限性。此刻让我们看看它们最强大的用例是啥:

Ray tracing(光线追踪)：光线追踪是一种以像素为单位跟踪光的途径生成图像的渲染技术。光线追踪利用 CPU 密集型的数学运算来模拟光的途径。其思想是模拟一些结果，如反射、折射、材料等。所有这些运算逻辑都可以增加到 Web Worker 中，以幸免堵塞 UI线程。更好的是——可以很容易地在多个 workers 之间(乃至在多个cpu之间)分割图像显现。下面是一个使用 Web Workers 的光线追踪的简便演示—https://nerget.com/rayjs-mt/r...。
Encryption(加密)：由于对个人和敏锐数据的监管越来越严厉，端到端加密越来越受欢迎。加密是一件非常耗时的事情，特殊是假如有许多数据需要频繁加密(例如，在发送到效劳器此前)。这是一个使用 Web Worker 非常好的场景，由于它不需要拜访 DOM 或任何花哨的东西——它是完成其工作的纯算法。只如果在 Web Worker 中工作的，关于端会员就是无缝的，不会影响到体验。
Prefetching data(预取数据)：为了优化你的网站或 web 利用程序并改善数据加载时间，你可以利用 Web Workers 提早加载和储备一些数据，以便在需要时稍后使用。Web Workers 在这种状况下非常棒，由于它们不会影响利用程序的UI，这与不使用Workers 时是不一样的。
Progressive Web Apps(渐进式Web利用程序)：这种渐进式Web利用程序要求，即便在会员网络不不乱的前提下，也能够快速的加载。这意味着数据必需当地储备在阅读器中。这也是 IndexDB 或相似 api 发挥作用的地方。平常状况下，客户端的储备都是必要的，但使用起来需要不堵塞UI渲染线程，那么工作就需要在 Worker 中停止了。不外，以IndexDB 为例，它供给了一些异步的API，调取它们的话也不需要使用 web worker，但假如是同步的 API，就必需要在 Worker 中使用了。
Spell checking(拼写检查)：一个根本的拼写检查程序的工作流程如下-程序读取一个字典文件与一个准确拼写单词列表。字典被解析为一个搜索树，以使实际的文本搜索更有效。当一个单词被供给给检查器时，程序检查它可否存在于预先构建的搜索树中。假如在树中没有寻到该单词，可以通过更换更换字符并测试它可否是有效的单词(假如是会员想要写的单词)，为会员供给替换拼写。所有的这些处置历程都可以在 Web Worker中停止了，会员可以不被堵塞的输入词汇和句子，Web Worker 在后台校验词汇可否准确乃至供给备选词汇。