首页 >web前端 >js教程 >JavaScript中Web Worker的详细介绍

JavaScript中Web Worker的详细介绍

不言
不言原创
2018-09-12 17:30:222304浏览

本篇文章给大家带来的内容是关于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的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn