Web Worker浅学
Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。它独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
1、Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示：
var webworker=new Worker('my_task.js');
创建webworker对象的时候需要判断浏览器是否支持 if(typeof Worker == 'undefind')则提示错误；
返回的webworker对象，该对象可以完成与worker线程的通信，主要通过webworker.postMessage(data)向线程发送消息，通过webworker.onmessage=function(evt){}来监听worker线程发送到主线程的消息，通过webworker.onerror=function(evt){}来监听线程中的错误消息，通过webworker.terminate()来告诉worker线程立即终止执行。
2、web worker线程是无法操作Dom对象的，所以像prompt、alert、console等都是无法在web worker线程中使用的，所以调试不太处理。但是可以将调试发送给主线程，主线程通过web worker线程发出的请求作出处理。
3、用于创建webworker线程的js文件必须和当前页面遵循同源策略，也就是说不能跨域请求js文件；另外，线程之间的消息传递是不能有Function对象的，就是说不能够传递函数，在safari浏览器中只能传递数字/字符串等基本值（连Object都不行）。并且所有线程之间的数据并不是常规的引用方式，都是一份独立的拷贝。因此一般情况下，我们会将传递的参数转化为字符串进行传递，可以通过JSON.stringify()和JSON.parse()来处理。
****一个发送消息的小例子****
woker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Worker模拟聊天</title>
<style>
.apply{width:500px;height:300px;overflow:auto;border: 1px solid #000;margin:20px;padding:20px;font-size:14px;line-height:24px;}
.apply .time{color:#ccc;font-size:12px;}
</style>
</head>
<body>
<div class="apply" id="res2"></div>
<div style="padding:20px;">
<textarea style="width:400px;height:100px;" id="res"></textarea>
<button onclick="startWorker()">发送</button>
<button onclick="stopWorker()">stop</button>
</div>
<script>
var w;
w = new Worker('worker.js');
var res = document.getElementById('res'),
res2 = document.getElementById('res2');
if(typeof Worker !== 'undefined'){
function startWorker(){
w.postMessage(res.value);
res.innerHTML = '';
w.onmessage = function(e){
var oTxt = document.createTextNode(e.data);
var oTime = document.createElement('div'),
oTimeTxt = document.createTextNode(new Date());
oTime.setAttribute('class','time')
oTime.appendChild(oTimeTxt);
res2.appendChild(oTime);
res2.appendChild(oTxt);
res2.appendChild(document.createElement('br'))
res2.appendChild(document.createElement('br'))
}
}
function stopWorker(){
w.terminate();
}
} </script>
</body>
</html>
worker.js
onmessage = function(e){
postMessage("收到："+e.data);
}
效果：
有借鉴：https://blog.csdn.net/web_doris/article/details/38440401
Web Worker浅学的更多相关文章
- 浅学JavaScript
JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...
- 前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析，Web Worker 实战
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...
- 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中调用的话会造成程序假死的情况 于是想 ...
随机推荐
- kafka 小案例【二】 --kafka 设置多个消费着集群
这个配是我在http://www.cnblogs.com/zhangXingSheng/p/6646972.html 的基础上再添加的配置 设置多个消息集群 (1)复制两份配置文件 > cp c ...
- oracle中can not set解决方法
原因:set autotrace on和set trimspool on在pl\sql中使用不了 解决方法:在window环境中,使用cmd命令,sqlplus user_name/password@ ...
- Linux的驱动模块管理：modprobe
由一段脚本開始: MODULE_PATH=/lib/modules/`uname -r` if [ ! -f ${MODULE_PATH}/modules.dep.bb ]; then # depmo ...
- HBase中我认为比较常用的两个类：Scan和Filter
学习HBase一段时间后,我认为HBase中比较常用,同时也是必须掌握的两个API是Scan和Filter.如下是我的理解: 1.Scan ---- 扫描类 作用:用来对一个指定Table进行按行扫 ...
- UVA-11625-Nice Prefixes (DP+矩阵快速幂)
题目(vjudge) 题面 题意: 你有K个字母,你需要用K个字母组成L长度的字符串,定义对于该字符串的任意前缀P 必须满足 ,输出方案数%1000000007的值. 思路: 首先可以想到一种简 ...
- IDEA 去掉 ALT + / 自动补全
取消掉Alt + / 自动补全 setting -> keymap -> main menu -> code -> completion -> cyclic Expand ...
- windows svchost.exe 引起的出现的莫名其妙的窗口失去焦点
我不知道你们遇到没,反正我是遇到了,现在我就把解决方法给你们,当然都是从网上整理下来的 这个失去焦点可以分为两种,一种是病毒,一种是系统自带的问题 首先你得知道自己的窗口被什么给挤掉了焦点 先看看这篇 ...
- vue实践---vue不依赖外部资源实现简单多语
vue使用多语,最常见的就是 vue-i18n, 但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了, 引入了反正导致代码体积大了,这时候单纯用vue实现多语就是比较好 ...
- window下安装php7的memcache扩展
安装memcache:http://www.runoob.com/memcached/memcached-connection.html1.4.4 c:\memcached\memcached.exe ...
- 智能家居DIY-空气质量检测篇-获取空气污染指数
前言 话说楼主终于升级当爸了,宝宝现在5个月了,宝宝出生的时候是冬天,正是魔都空气污染严重的时候,当时就想搞个自动开启空气净化器,由于种种原因一直没有时间搞,最近终于闲下来了这个事情终于提上议程了,现 ...