这就是说，你需要将你要传递的数据最小化。你不可以传递 functions ,即使是支持的类型也会有一些限制，这些也很容易产生一些难以发现的 bug。如果你将你的 API 定义为只传递字符串，数值，数组和对象的话，那你可能会避过这些问题。
循环引用
如果你有一个很复杂的对象，那么里面很可能存在循环引用，这时如果你将它序列化成 JSON，你将会得到一个 TypeError: Converting circular structure to JSON.
let a = {}; let b = {a}; a.b = b; JSON.stringify({a,b}); // Error
然而你可以在 postMessage 中放心的使用，从而你就可以在 worker 中使用。
Transferable objects
为了防止同时修改同一变量的场景，你传递给 postMessage 的所有变量都会复制一份，这样确保了你多个线程不会修改同一个变量。但如果你想要传一个非常大的数据的话，你就会发现复制操作是很慢的。比如，如果你在做一些图片相关的运算，你可能会传递整个图片信息，就可能会遇到复制性能的瓶颈。
好在有 transferable object ，用 transfer 来代替 copy,比如ArrayBuffer 是transferable对象，而我们可以把任何类型的对象放在 ArrayBuffer 中。
如果你 transfer 一个对象，之前拥有它的线程被锁定权限，它确保了数据没有复制之前，不会被同时修改。
这时 postMessage 的代码段就有点尴尬了：
const ab = new ArrayBuffer(100); console.log(ab.byteLength); // 100 worker.postMessage(ab, [ab]); console.log(ab.byteLength); // 0
确保在 postMessage 中传递第二个参数，否则数据将会被复制。
const ab = new ArrayBuffer(100); console.log(ab.byteLength); // 100 worker.postMessage(ab); console.log(ab.byteLength); // 100
四、Webpack
在 Webpack 中使用 Web worker 时，你需要用 worker-loader。将它添加到 package.json 中的 devDependencies，然后运行 npm install，就可以了。
用到 worker 时，只需要 require 它。
const workerCode = require("worker!./worker.js"); ... const worker = new workerCode();
这样就初始化了 worker，然后就像上面讲的一样使用 worker。
如果需要使用行内 worker，你需要传递 inline 参数给 loader。
const workerCode = require("worker?inline!./worker.js"); ... const worker = new workerCode();
在 worker 中你也可以 import 模块。
import fibonacci from "./fibonacci.js"; ... const result = fibonacci(num);
缺点
在 Webpack 中使用 worker 很简单，但是在使用时也有一些坑值得你注意。
首先，无法将代码共用部分提取出来。如果你的 worker 中依赖一段共用代码，你只能把代码添加到 worker 中，不管其他地方是否也用到同样的代码。而且如果你多个 worker 要用同样的库，你也需要在每个 worker 中引入它们。
你可能会想如果你不用 worker-loader，然后用CommonsChunkPlugin指定一个新的入口,可能会解决这个问题。但是不幸的是 worker 不像是浏览器 window ，一些 feature 不可用，所以一些代码必须要引入。
同时，用行内 worker 也不会解决问题，共用的代码依然会出现在多个地方。
第二点缺点是，行内 worker 可能会导致 ObjectURLs内存泄露.它们被创建出来以后就不会被释放。这虽然不是一个大问题，但是如果你有很多“一次性” worker 的话，就会影响性能。
综上所述，我个人建议是使用标准的 worker，注意在 worker 中引入了什么。还要注意使用缓存。
五、IFrames Web worker
IFrames Web worker 和 IFrame 很像，而且印象中 IFrame 也可以实现多线程。但是 IFrame 存在一些不是线程安全 API，比如 DOM 相关，浏览器不能为他们生成新的线程，参考这里.
在 IFrame 跨域中，很多 API 它都没有权限，也只能通过 postMessage，就像 Web Worker 一样。理论上，浏览器可以在不同的线程中运行 IFrame，也就可以用 IFrame 实现多线程。
但是实际并非如此，它还是单线程的，浏览器不会给它们额外的线程。
总结
Web Worker 解决了 JavaScript 一直以来的大难题，尽管它的语法有些奇怪而且有很多限制，但是它却可以真真正正的解决问题。从另外一方面来讲，它也还是个婴儿，某些方面还不是很成熟，不能让我们完全依赖，所以这个技术普及还有一段距离，目前适用场景也比较局限。所以说，如果你需要做多线程，不要再等待其他的什么技术，学习 web worker 的边缘问题，避开它的坑，你就可以很好的提高用户体验。以上就是这篇文章的全部内容，希望对大家能有所帮助。
您可能感兴趣的文章: