浅谈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 完美实现圆角效果
Jul 13 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python 内置函数汇总详解
2019/09/16 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
公司道歉信范文
2014/01/09 职场文书
药品采购员岗位职责
2014/02/08 职场文书
《值日生》教学反思
2014/02/17 职场文书
秋天的雨教学反思
2014/04/27 职场文书
监督检查工作方案
2014/05/28 职场文书
中秋手机店促销方案
2014/06/16 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL