首页 > js教程 > 正文

JavaScript中Web Worker的详细介绍

原创 2018-09-12 17:30:22 0 4
本篇文章给大家带来的内容是关于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中文网其它相关文章!

  • 相关标签:web-worker javascript
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • HTML5 Web Workers之网站也能多线程的实现_html5教程技巧
  • JavaScript中的Web worker多线程API研究_javascript技巧
  • HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...
  • HTML 5 Web Workers
  • HTML5-Web Worker APIs的代码详解
  • 谷歌浏览器web worker出现cannot be accessed from origin 'null'错误
  • H5的多线程如何实现Web Worker
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级教程 javascript初级教程
  • JavaScript教程 JavaScript教程
  • JavaScript实现购物车 JavaScript实现购物车
  • 玩转javascript之三级联动实例 玩转javascript之三级联动实例
  • javascript初级视频教程 javascript初级视频教程
  • 相关视频章节