浅谈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实现立方体自转效果
Mar 01 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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
Cakephp 执行主要流程
2010/03/24 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python3.x实现发送邮件功能
2018/05/22 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python 高效编程技巧分享
2020/09/10 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
什么是URL
2015/12/13 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
入党积极分子介绍信
2014/01/17 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL