浅谈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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python 中random模块的常用方法总结
2017/07/08 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
new修饰符是起什么作用
2015/06/28 面试题
《在家里》教后反思
2014/03/01 职场文书
诚信承诺书范文
2014/03/27 职场文书
公司委托书格式范文
2014/04/04 职场文书
毕业设计说明书
2014/05/07 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技