Web Worker
写在前面
众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕的用户体验HTML5怎么会不修订了,这样Web Worker诞生了。
简介
Web Worker进程加载的js运行的时候不仅不会影响浏览器UI,而且也不会影响其它Web Worker进程加载的JS代码。由于Web Worker进程加载的js运行的时候不会影响浏览器UI,也就说明Web Worker中加载的js不能修改用户界面,而每个Web Worker都有自己的全局运行环境,因为它加载的js不能修改用户界面,所以它能操作的对象主要只包括以下几个部分
- 一个浏览器对象,只包含四个属性:appName,appVersion,userAgent,platform
- 一个location对象(和window里的一样,但是里面所有的属性是只读的)
- 一个self对象指向全局Web Worker线程对象
- 一个importScripts()方法使Web Worker能够加载外部js文件
- 所有的ECMAScript对象
- XMLHttpRequest构造器
- setTimeout()和setInterval()方法
WebWorker擅长之处
这里先特意讲一个importScript方法,它是以阻塞方法加载js的,只有所有文件加载完成之后接下来的脚本才能继续运行
事实上,Web Worker适合于那些纯数据的,或者说与浏览器UI没关系的长运行脚本。
下面附上最基本的demo事例,我相信聪明的你一看就会了
简单建立一个html页面,页面代码如下而所示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var worker = new Worker("webworker.js"); //这句话将让浏览器去加载webworker.js
worker.postMessage('主线程发起的数据请求!'); //把数据传递给webworker.js worker.onmessage = function (event) {
console.log(event.data); //来自work的数据保存在event.data
//接下来就可以对它event.data进行序列化等数据处理啦
}; </script>
</body>
</html>
上面代码加载的webworker.js的代码如下所示:
onmessage = function (event) {
var data = event.data;//这是接收过来的数据
console.log(data);//注意啦 这里不能用alert来替换console.log 因为alert是会阻塞ui 所以wobworker没有使用alert的权限哦
postMessage(data + ' --- js回复过来的数据哦!');//这里可以把数据传递给主线程哦
};
onerror = function (event) {
console.log('Error:' + event.filename + '(' + event.lineno + '):' + event.message);
//event.filename 错误的文件名
//event.lineno 错误的行号
//event.message完整的错误消息
}
那么Web Worker的主要用处在哪儿呢,它的优点有哪些呢,下面总结一下哈
- 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信,使用ternimate方法停止工作
- 可以在worker中通过importScripts(url)加载另外的脚本文件
它的主要缺点在哪儿呢
- 不能跨域加载JS
- worker内代码不能访问DOM
- 因为它是html5中新的API,所以各个浏览器支持都不一样哦!
web worker来加载数据还是比较慢的,即便是大数据量情况下也没任何优势,可能是Worker初始化新起线程比较耗时间。除了在加载过程中是无阻塞的之外没有任何优势
下面再附上我写的一个例子,主要是发挥Web Worker的特长
html界面代码如下所示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript"> var worker = new Worker('fibonacci.js');
worker.addEventListener('message', function (event) {
console.time('总共花费的时间为:');
console.log('结果:' + event.data);
console.timeEnd('总共花费的时间为:');
}, false); worker.postMessage(40); </script>
</body>
</html>
上面代码中加载的fibonacci.js代码如下所示
var fibonacci = function (n) {
return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
};
onmessage = function (event) {
var n = parseInt(event.data, 10);
console.log('传过来的值为:'+n);
postMessage(fibonacci(n));
};
onerror = function (event) {
console.log('Error:' + event.filenme + '(' + event.lineno + '):' + event.message);
}
大家运行后可以发现chrome控制台的结果如下图所示:
Web Worker的更多相关文章
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- Web Worker javascript多线程编程(二)
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- web Worker使js实现‘多线程’?
大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...
- HTML5:web socket 和 web worker
a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...
- javascript 多线程Web Worker不引用外部js文件的方法
最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...
- HTML5 Web Worker的使用
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...
- Web Worker 是什么鬼?
前言 前端工程师们一定有过这样的体验,当一个页面加载了大量的 js 文件时,用户界面可能会短暂地"冻结".这很好理解,因为 js 是单线程的语言.我们再走的极端点,一段 js 中出 ...
随机推荐
- TM4C123G红外触摸屏:开发板好不容易实现了原理,放到专家设计的板子上无法运行,于是专家跑路项目黄了
使用TI的TM4C123G LaunchPad开发板,USB接口,来对同样的芯片进行烧写. 我们只用烧写那一块功能,不用另外一个芯片的开发功能,需要跳线 源码项目: 从官方网站TM4C123G ...
- 拿到阿里,网易游戏,腾讯,smartx的offer的过程
前言 从今年的3月14日阿里的电话面试开始,到现在4月16日在西安悦豪酒店进行的腾讯HR面到现在一个多月了,中间先后收到了阿里,网易游戏,腾讯和smartx的offer,今天早晨刚刚接到了腾讯HR的电 ...
- 使用spring boot和thrift、zookeeper建立微服务
Spring cloud适应于云端服务,也适用于企业信息化SOA建设.spring boot也是restful微服务开发的利器.但对于内网服务,即服务与服务之间的调用,spring并没有去刻意封装,也 ...
- [BZOJ3211]花神游历各国(线段树+区间开根)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3211 分析: 区间开根是没法区间合并的. 但是注意到10^9开根开个5次就变成1了…… ...
- 当在XP系统上无法安装Mysql ODBC时,怎么办?
system32下面缺失如下连接中的dll http://www.33lc.com/soft/19950.html 这个dll名为: msvcr100.dll 本来安装过程中会出现Error 1918 ...
- c# 获取网页源码
C#获取指定网页HTML原代码可使用 WebClient WebRequest HttpWebRequest 三种方式来实现. 当然也可使用webBrowse!在此就不研究webBrowse如何获取了 ...
- 使用D3绘制图表(2)--绘制曲线
上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...
- #查看Linux的版本信息
查看Ubuntu的版本信息 cat /etc/issue lsb_release -a 查看Centos的版本信息 cat /etc/centos-release rpm -q centos-rele ...
- LINUX下PHP开启短标签short_open_tag支持
LINUX下PHP开启短标签short_open_tag支持 以CENTOS为例: 找到php.ini #find / -name php.ini #/etc/php.ini 编辑php.ini #v ...
- MySQL的恢复脚本
原文转自: http://blog.csdn.net/dbanote/article/details/13295727 应用场景: ********************************** ...