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浅学的更多相关文章

  1. 浅学JavaScript

    JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...

  2. 前端每周清单第 49 期:Webpack 4 Beta 尝鲜,React Windowing 与 setState 分析,Web Worker 实战

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...

  3. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  4. Web Worker javascript多线程编程(一)

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  5. Web Worker javascript多线程编程(二)

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  6. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  7. web Worker使js实现‘多线程’?

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  8. HTML5:web socket 和 web worker

    a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...

  9. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

随机推荐

  1. oracle、MySQL、SQL Server的比较

    MySql的优点:1 MYSQL支持5000万条记录的数据仓库(3.x版本就支持了) 2 MYSQL适应所有平台 . 3 MYSQL是开源软件,开源的东西似乎总是比较实在一点,不会有太多商业化的考虑. ...

  2. Linux_经常使用命令

    1. ls显示文件夹文件夹及文件使用方式: ls -lt -a 显示文件夹下全部文件及文件夹包括 . 与 .. -A 显示文件夹下全部文件及文件夹不包括 . 与 .. -l 显示文件夹下全部文件及文件 ...

  3. 腾讯课堂十大Excel函数

    十大函数:if,sumifs,countifs,vlookup,match,index,indirect,subtotal,left(mid,right),offset substotal:用于灵活计 ...

  4. EJB是什么?(节选)

    近期的项目中使用了EJB.当时就仅仅知道怎么用,没有深入的去理解.当完毕这个项目之后.再回想项目中使用的技术.框架以及工具的时候,突然感觉对EJB这个概念非常是模糊,于是上网搜一些资料.可是,非常多的 ...

  5. Cocos2d-x 3.2 之 别踩白块(第三篇)

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  6. 解决Discuz安装时报错“该函数需要 php.ini 中 allow_url_fopen 选项开启…”

    开启php的fsockopen函数 —— 解决DZ论坛安装问题“该函数需要 php.ini 中 allow_url_fopen 选项开启.请联系空间商,确定开启了此项功能 在安装dz论坛时遇到因为fs ...

  7. 安装Hadoop 1.1.2 (三 安装配置Hadoop)

    1 tar -zxvf hadoop-1.1.2.tar.gz 2 在hadoop/conf目录 (1) 编辑 hadoop-env.sh export JAVA_HOME=/usr/java/jdk ...

  8. EventBus的使用详解,功能为在Fragment,Activity,Service,线程之间传递消息

    最近跟同事用到了EventBus的使用,之前不太了解EventBus,查阅资料发现EventBus还挺好用的,用法比较简单,下面就把我看到的关于EventBus的博客分享给大家,里面介绍了很多的使用详 ...

  9. Django APP之contenttypes简单应用

    Conttenttypes介绍 当你看到contenttype你是不是想到了请求头的contenttype? 但是 此contenttypes不是请求头Content-Type而是Django自带的a ...

  10. Centos设置开机启动Apache和Mysql

    先用chkconfig --list查询apache和mysql服务是否存在,不存在则需要手动添加 [root@centos64 vsftpd]# chkconfig --list 测试存在,只需要开 ...