首页 / JAVASCRIPT / JavaScript中WebWorker的详细介绍

JavaScript中WebWorker的详细介绍

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中WebWorker的详细介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2892字，纯文字阅读大概需要5分钟。

内容图文

本篇文章给大家带来的内容是关于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 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

  • 脚本限制：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,启动项目，用浏览器打开，看控制台：

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技巧

以上就是JavaScript中Web Worker的详细介绍的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JavaScript中WebWorker的详细介绍全部内容，希望文章能够帮你解决JavaScript中WebWorker的详细介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284717.html

来源：【匿名】