Web Workers后台运行

版权声明: https://blog.csdn.net/Her_smile/article/details/86416927

随着Web应用复杂性的与日俱增,越来越复杂的计算在所难免,长时间运行的javaScript进程会导致浏览器冻结用户界面,让人感觉屏幕冻结了。Web Works通过让javaScript在后台以线程、进程、运行在其他处理器上的线程或进程解决了这个问题。也就是说可以通过开启多线程、进程来解决这问题。
并且兼容性很好。

使用Web Worker

在页面中开启一个Web Worker,它处理完数据以后可以与页面进行通信,讲数据处理后得到的结果传给页面。

创建

var worker = new Worker('xxx.js')

这里会导致浏览器下载这个文件,并且等待接受开始的命令

给Worker传递开始的消息

Worker传递消息可以使用worker.postMessage(msg)msg可以是一个字符串,也可以是任何一个可以被序列化为JSON的值,例如对象。而且需要注意postMessage是异步的。

Worker处理完成与页面进行通信

可以绑定两个事件messageerror事件,其中message事件的参数为event,注意不是事件对象,只是一个名字,在event.data中就可以得到来自worker的数据。

worker出错时就会触发error事件,参数为一个event对象,包含以下属性:

  • filename: 文件名
  • lineno: 出错的行号
  • message: 错误信息

如果想停止worker的工作,可以在任何时候调用worker.terminate(),会立即终止,并且不会触发任何事件。

Worker的全局作用域

worker所执行的javaScript代码完全在另外一个作用域,与当前页面中的代码不能共享作用域。而且完全不能访问DOM。它的全局对象thisself都指向的是这个wroker对象。在这个作用域中功能非常有限。当页面在worker对象上调用postMessage的时候,为了处理来自页面的数据,也需要绑定message事件。

this.onmessage = function(event) {
	var data = event.data
}

在页面内部可以调用this.close()来停止工作

包含其他脚本

在内部可以使用importScript(),来包含其他脚本,它接收一个或多个指向外部脚本的URL,每个加载过程都是异步的,并且加载完成之后会 按顺序执行。

猜你喜欢

转载自blog.csdn.net/Her_smile/article/details/86416927
今日推荐