本篇文章给大家带来的内容是关于javascript中web worker的详细介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
介绍
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。
Web Worker使用要点
同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
DOM 限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。
-
通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。
立即学习“Java免费学习笔记（深入）”；
脚本限制：Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。后面我们允许会做处理。
安装http-server
Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。所以我们得起一个项目。使用http-server最简单
安装：
> cnpm i -g http-server
使用：
> http-server
基本使用
我们新建一个文件夹名叫worker，里面新建三个文件分别是
index.html main.js worker.js
新建一个worker线程很简单，只需：
var worker = new Worker('worker.js')main.js:
var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
console.log('main: ', e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
// console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')worker.js:
console.log('worker task running')
onmessage = (e)=>{
console.log('worker task receive', e.data);
// 发送数据事件
postMessage('Hello, I am from Worker.js');
}在worker文件夹下，命令行输入http-server,启动项目，用浏览器打开，看控制台：
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
worker running worker task running worker task receive hello worker,I am from main.js main: Hello, I am from Worker.js
从上面可以看到，worker通过onmessage来监听数据，通过postMessgae来发送数据
终止 worker
worker.terminate();
处理错误
worker.addEventListener('error', (e) => {
console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});event.filename: 导致错误的 Worker 脚本的名称；
event.message: 错误的信息；
event.lineno: 出现错误的行号；
加载外部脚本
main.js
var worker = new Worker('./worker1.js');worker1.js
console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
// 或者
// importScripts('worker2.js');
// importScripts('worker3.js');worker2.js
console.log("I'm worker2")worker3.js
console.log("I'm worker3")兼容性
https://caniuse.com/#feat=webworkers
兼容性还不是很乐观，不过在移动端的兼容性还不错
相关推荐：
JavaScript中的Web worker多线程API研究_javascript技巧
JavaScript中的类(Class)详细介绍_javascript技巧
