WebWorker 一定程度上可以算得上是浏览器中的多线程技术了,在项目中适当使用 Worker 来做一些耗时的操作能大大提高页面整体流畅度。

Worker的使用也是非常简单的,通过向 Worker 构造函数传递需要在worker中运行的文件路径作为参数,就可以使得对应的文件运行在worker线程。

Worker线程中没有 window 对象,也没有 document 对象。既不能操作也不能创建 DOM。而且 worker 线程和主线程只能通过消息机制来通信。

下面是一个 WebWorker 的简单用法:

首先需要创建一个 Worker 实例:

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

在 worker.js 中写下如下代码:

 console.log('Hello world');

然后 worker.js 就会在 worker 线程中运行,这也就意味着这里的代码不管是什么,基本上可以认为对主线程(也就是浏览器线程)没有任何影响。虽然实际上电脑跑的东西越多性能越差,但至少主线程不会被阻塞。

无法跟主线程交互的代码用处非常有限,当然,你可以绕过去,直接大家都走服务器端结合 WebSocket 来实现跟主线程,但 WebWorker 本身能跟主线程通过消息机制来交互确实会更方便些,如果再允许提交对于 DOM 的操作就更好了。

WebWorker 通过 postMessage 来发送消息,通过 message 事件来接受接收消息。其中发送的数据就在 event.data 中。

比如上面的代码,由于 worker.js 是通过主线程的代码加载的,所以执行顺序定然晚于主线程的代码执行,当 worker.js 中的代码执行后,可以通过向主线程发送一个消息,告诉主线程一切就绪,可以开始开始正常交互了.

这里需要知道的就是 在 worker 中没有 window 实例,也没有全局的 this,但是却有着 WorkerGlobalScope 也就是 self,当前 worker 自己。

 self.postMessage('ready');

在主线程中通过事件处理程序接收消息

 worker.addEventListener('message', function (event) {
console.log(event.data);
});

另外,所有跟 worker 线程交互的代码也最好在收到 ·ready· 这个消息之后进行。因为此时 worker 线程已经就绪,而且可以在发送 ready 消息之前把必备的准备工作做好。

还有就是消息不要真的就发送简单的字符串,除非系统里面确实就是这种需求,最好设计下数据结构,采用统一的方式来做消息交互,比如类似下面这样或者别的方式都行:

{
cmd: '',
payload: ...
}

要进行错误处理,在主线程和在 worker 中做法很相似,都是添加 “error”事件处理程序,不同的是用 worker 实例还是 WorkerGlobalScope 也就是 self。

 worker.addEventListener('error', function (event) {
console.log('在主线程内监听 worker 实例的错误');
}); self.addEventListener('error', function (event) {
console.log('在 worker 线程内监听当前 worker 的错误');
});

类似在 html 文档中可以使用 <script> 标记导入外部脚本,在 worker 里面也可以导入外部脚本,用法如下:

 importScripts('script1.js', 'script2', ....);  // 可以导入一个到多个,省略号不是代码,这行只算是伪代码

最后用完了 worker 就可以把它关闭了,在主线程中用 terminate,在 worker 线程中直接用用 close 就可以了,用不到时就应该即使关闭,多少能省点系统资源。

 worker.terminate(); // 在主线程中关闭当前 worker
self.close(); // 在 worker 中关闭自己

WebWorker 简单使用方式的更多相关文章

  1. java最简单的方式实现httpget和httppost请求

    java实现httpget和httppost请求的方式多种多样,个人总结了一种最简单的方式,仅仅需几行代码,就能够完美的实现. 此处须要用到两个jar包,httpclient-4.3.1.jar.ht ...

  2. 以最简单的方式讲HashMap

      以最简单的方式讲HashMap HashMap可以说是面试中最常出现的名词,这次头条的一面,第一个问的问题就是HashMap.所以就让我们来探讨下HashMap吧. 实验环境:JDK1.8 首先先 ...

  3. 最简单的方式离线部署Python依赖包

    最简单的方式离线部署Python依赖包 SHOW ME CODE! 打包: $ tempdir=$(mktemp -d /tmp/wheelhouse-XXXXX) $ pip wheel -r re ...

  4. activiti复盘重推的一种简单实现方式:

    activiti复盘重推的一种简单实现方式: 设置流程的每一步让用户选择,比如一共有6步完成,用户选择从第4步开始复盘重推,那么把原来的推演oldId和4传到后台, 首先,后台生成一个新的推演id n ...

  5. MyBatis简单使用方式总结

    MyBatis简单使用方式总结 三个部分来理解: 1.对MyBatis的配置部分 2.实体类与映射文件部分 3.使用部分 对MyBatis的配置部分: 1.配置用log4J显式日志 2.导入包的别名 ...

  6. Hyperledger Fabric:最简单的方式测试你的链码

    一直以来,写完链码进行测试都要先搭建一个Fabric环境,然后安装链码进行测试,实际上Fabric提供了最为简单的方式可以允许我们对编写的应用链码进行功能测试,不需要搭建一个完整的Fabeic环境.而 ...

  7. 怎么处理sqlserver2017部署在winowsDocker上时区无法修改成功的方式,并且可以多创建新的容器调用简单的方式直接使用!

    在创建该容器的时候我们执行的语句中添加了一个 从图中所看到的内容,上海时区,按照正常流程一般都是可疑正常执行的,但最后事情并不是我们所想的那么简单. 我们进入对应的容器里面 ,执行语句之后查找对应的文 ...

  8. react-native-pg-style使用方法(以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式.)

    react-native-pg-style 以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式. 看大家写的源码中都是按照react-native标准的样式创建方式来写样式代码 ...

  9. Vue-3D-Model:用简单的方式来展示三维模型

    为什么做这个组件 我经常听到前端朋友们抱怨,在网页上展示三维模型太麻烦了.但是这方面的需求又有很多,例如做房地产的需要展示户型.卖汽车的需要展示汽车模型等. 在网页上展示三维模型就只能用WebGL技术 ...

随机推荐

  1. [Java算法分析与设计]--顺序栈的实现

    在程序的世界,栈的应用是相当广泛的.其后进先出的特性,我们可以应用到诸如计算.遍历.代码格式校对等各个方面.但是你知道栈的底层是怎么实现的吗?现在跟随本篇文章我们来一睹它的庐山真面目吧. 首先我们先定 ...

  2. Linux的安装(虚拟机环境)与基础配置

    一.背景 本文介绍如何安装虚拟机VMware以及如果在虚拟机上安装Linux系统以及Linux安装完毕之后的基础配置 需要准备的东西有VMware以及Linux镜像文件 二.下载安装VMware 下载 ...

  3. Django rest framework(7)----分页

    目录 Django rest framework(1)----认证 Django rest framework(2)----权限 Django rest framework(3)----节流 Djan ...

  4. 【淘宝客】根据淘客联盟精选清单(淘宝天猫内部优惠券)随机显示淘宝天猫优惠券dome

    也许大家在生活中经常淘宝看到[淘宝天猫内部优惠券]的网站,或者在微博中经常有博主发券,让大家生活中购物便宜许多,作为一个站长,我们也希望自己的网站也能有这样的一个功能,现在就分享给大家,还是免后台哦. ...

  5. CAS与OAuth2的区别

    CAS与OAuth2的区别 一. CAS的单点登录时保障客户端的用户资源的安全 . OAuth2则是保障服务端的用户资源的安全 . 二. CAS客户端要获取的最终信息是,这个用户到底有没有权限访问我( ...

  6. Unity3D学习(三):利用NGUI实现一个简单的左右摇杆

    前言 小游戏Konster在测试的时候有热心玩家反馈左右移动手感不是很好,最主要的问题是:手指一旦按在手机屏幕的一个方向按钮上,向反方向滑动到另一个方向按钮上是不会改变玩家移动方向的. 具体如下图: ...

  7. PAT1084:Broken Keyboard

    1084. Broken Keyboard (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue On a ...

  8. 在Windows下同时安装Python2.x和Python3.x

    前言: Python现在是两个版本共存,Python2.x和Python3.x都同时在更新.但是Python2.x和Python3.x的区别还是很多的(以后我可能会写一篇文章列举一下Python2.x ...

  9. RestTemplate 微信接口 text/plain HttpMessageConverter

    一.背景介绍 使用 Spring Boot 写项目,需要用到微信接口获取用户信息. 在 Jessey 和 Spring RestTemplate 两个 Rest 客户端中,想到尽量不引入更多的东西,然 ...

  10. webpack + vue 在dev和production模式下的小小区别

    上周的某一天,和一位同样是前端技术极度爱好的开发者朋友聊天,他在提出了一个问题,他写的vue程序为什么在dev模式运行良好,而在production模式就直接报错了.这让我感到惊讶,还有这么神奇的事情 ...