浏览器执行环境是单线程的，一旦出现【主线程】耗时操作，就会造成浏览器卡死，用户点击没响应等情况。
Web Worker 可以创建一个独立于主线程运行的子线程。可以将一些【可能会阻塞主线程的操作】，丢在 Worker 里去单独执行。
那为什么平时都没有意识到主线程阻塞这个问题呢？
因为下大多数情况下，我们不太关心浏览器主线程是否会被阻塞，因为同步代码执行一般都很快，慢的I/O、异步请求、定时器等操作，浏览器默认就帮我们异步操作了（变成宏、微任务了）。
比如:
- 异步请求
- 定时器
- 宏、微任务等。
阻塞主线程 - 一般不会出现
事实上，一般项目开发中，很难会用阻塞主线程的业务逻辑代码出现。 但是为了验证这个问题，这里可以模拟一个非常尴尬的场景。
// 创建一个 sleep 函数，模拟主线程阻塞的情况
function sleep (wait = 5000) {
let now = new Date()
while (new Date() - now < wait) { }
}
sleep() // 阻塞主线程
document.addEventListener.call(btn, "click", function () {
alert('点我有反应吗?')
})
我们会在浏览器上放一个按钮，并给按钮绑定点击事件。
但由于 sleep 耗时 5 秒钟，在此过程中，主线程就阻塞了。
可以发现，由于主线程被阻塞，浏览器都无法正常渲染了，都出现了黑屏。 点击按钮也半天没反应。
使用 Worker 解决主线程耗时造成的阻塞问题
可以将主线程一些耗时的【同步】操作，丢给 Worker 来处理，将耗时操作丢在子线程中，这样主线程就不会被阻塞，就正常处理渲染，处理用户点击，异步回到等。
WebWorker 的作用，就是为了 JavaScript 创建多线程环境，允许主线程创建 Worker 子线程，将一些【可能会阻塞主线程】的任务分配给 worker 子线程去处理。两者互不干扰。等子线程处理完成之后，在通过消息的机制把处理结果返回给主线程即可。充分利用多线程的优势。
Worker 线程毕竟占据的一个操作系统的线程资源，在 Worker 的任务执行完毕之后，即可将其关闭，释放操作系统线程资源。
Worker 使用说明和 API
使用说明
- 同源限制
分配给 worker 线程的脚本，必须和主线程脚本同源。（否则无法创建 worker，且双方无法通信）
- DOM限制
Worker 工作在子线程，和主线程不太一样。所以并无法操作 DOM \ BOM 等 API。（纯数据处理）
- 全局对象限制
Worker 全局对象不是
window,所以一些window上的全局属性和方法也无法访问。（但可以访问Navigator和Location接口）
- 通信限制
由于
Worker单独运行在一个子线程，所以和主线程通信使用发布、订阅的消息机制完成。
- 脚本限制
可以在 Worker 中使用
XMLHttpRequest来发送异步请求。
- 运行环境限制
Worker 不能运行在
file://协议下。（不能直接右键打开）
API
Worker 的 API 十分简单，和 iframe 通信 API 类似。
主线程
// 在主线程中，使用 `new Worker` 构造函数，来创建一个 `Worker` 实例。
const worker = new Worker('worker.js',{name: 'worker'})
// 主线程中，向子线程 worker 发送数据
worker.postMessage(data)
// 主线程中，监听子线程 worker 回发的数据
worker.onMessage = (data) => {
console.log('来自子线程的数据',data)
}
// 主线程中，监听 worker 错误
worker.onerror = (err) => {}
// 主线程关闭 worker 子线程
worker.close()
子线程 worker.js
//在 worker 线程中监听主线程发送过来的数据
self.onmessage = (data) => {
console.log('主线程发送过来的数据',data)
}
// 在 worker 中，向主线程发送数据
self.postMessage(data)
// 在 worker 中监听错误
self.onerror = (err) => {}
// 在 worker 中关闭自己
self.close()
利用 Worker 解决上述主线程阻塞问题
// 在浏览器主线程中..
// 定义异步事件，worker 限制耗时操作不会阻塞主线程
document.addEventListener.call(btn, "click", function () {
alert('点我有反应吗?')
})
// 主线程创建 worker
const worker = new Worker('./worker.js', { name: 'my-worker' })
// 主线程给 worker 子线程发送数据
worker.postMessage({ id: 1, name: 'gqs' })
// 主线程注册子线程的 postmessage 数据回调
worker.onmessage = ({ data }) => {
console.log('来自子线程 worker 的数据', data)
}
// 在 worker.js 子线程中
console.log(self.name)
self.onmessage = function ({ data }) {
console.log('接受到了来自主线程的数据:', data)
sleep(10000) // 耗时 10s
self.postMessage({ id: 1, name: 'gqs' })
}
self.onerror = function (err) {
// worker 线程发生了错误!
throw new Error(err)
}
// 模拟会阻塞主线程的耗时操作.
function sleep (wait = 5000) {
let now = new Date()
while (new Date() - now < wait) { }
}
我们将【会阻塞主线程】的耗时操作，丢在 worker 中去单独处理后，在查看效果。
总结
一般情况下，你不会用到
Worker，因为浏览器主线程一般很少会出现很复杂从而导致阻塞的操作。默认的耗时操作，都会浏览器默认处理为宏、微任务了。
当遇到了类似上述那种，在主线程同步环境下造成阻塞的问题，可以使用
worker来创建一个子线程进行处理，提高用户体验。
