浅谈Html5多线程开发之WebWorkers


Posted in HTML / CSS onMay 02, 2018

我们都知道,浏览器执行js代码是单线程的,当页面脚步执行时,页面是没办法响应别的的,直到脚步的结束,而这里介绍的WebWorkers就可以改变这一切。

WebWorkers是运行在后台的js代码,独立于其他脚本,不会影响页面的性能。我们可以继续做任何愿意做的事情:点击、选取内容等等,而此时WebWorkers在后台运行。

所有主流浏览器均支持 web worker,除了 Internet Explorer。

第一步:生成worker。

调用Worker()构造函数,指定一个要在worker线程内运行的脚本的URI,例子是当前页面指定worker线程执行的脚步为script-worker.js。

var myWorker = new Worker("script-worker.js");

在script-worker.js里面我们可以执行额外的代码,这些代码的执行不会影响页面去干别的你想干的事情,这听起来很棒。

第二步:传递数据。

页面可以和worker交互传递数据,这样worker在不影响页面干有意义的事情的情况下可以默默去计算,好了告诉一下页面,使用这些数据。

//[主页面代码]
myWorker.postMessage("data-from-mainpage");

//[worker代码]
onmessage = function (oEvent) {

    console.log("主页面发送过来的数据是:"+oEvent.data));    
};

上面是【主页面发送数据给worker脚本】的情况,是的,你看见了非常亲切的postMessage,好吧,我喜欢这个东西。

//[主页面代码]
 myWorker.onmessage = function (oEvent) {
 
     console.log("worker脚本发送过来的数据是:"+oEvent.data));
     
 }; 
//[worker代码]
postMessage("data-from-mainpage");

上面是【worker脚本发送数据给主页面】的情况,依旧很简单,不过这些只是API,关键在于巧妙的使用才是有益的。

此外,可能worker执行会出错,主页面通过:

myWorker.onerror=function(oEvent){};

可以监听worker发生错误。

第三步:重要几点。

worker线程能够在不干扰UI的情况下执行任务,所执行的JavaScript代码完全在另一个作用域,与当前网页中的代码不共享作用域。

Worker的全局作用域中提供了importScripts()方法,接收一个或多个指向JavaScript文件的URL,加载过程都是异步进行。

importScripts()只会在您提供绝对URI的情况下生效,执行过程也是异步的。

当我们创建WebWorkers对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止,使用myWorker.terminate()方法可以终止WebWorkers,并释放浏览器/计算机资源。

第四步:重要限制。

1.无法访问DOM节点,无法访问全局变量或是全局函数,法调用alert()或者confirm之类的函数和无法访问window、document之类的浏览器全局变量;

2.不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数,也可以使用XMLHttpRequest对象来做Ajax通信。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 #HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 #HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 #HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 #HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 #HTML / CSS
HTML5实现移动端复制功能
Apr 19 #HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 #HTML / CSS
You might like
php xml文件操作代码(一)
2009/03/20 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
写的htc的数据表格
2007/01/20 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python实现简单的socket server实例
2015/04/29 Python
python实现八大排序算法(2)
2017/09/14 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
详解【python】str与json类型转换
2019/04/29 Python
python pytest进阶之fixture详解
2019/06/27 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
作文批改评语大全
2014/04/23 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
文明上网主题班会
2015/08/14 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python