浅谈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的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 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中长文章分页显示实现代码
2012/09/29 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python通过索引遍历列表的方法
2015/05/04 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
用Python写一个自动木马程序
2019/09/17 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
用python进行视频剪辑
2020/11/02 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
运动会通讯稿300字
2014/02/02 职场文书
常务副总经理任命书
2014/06/05 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
五一晚会主持词
2015/07/01 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers