There is no doubt that JavaScript是没有多线程之说的，他只能一件事一件事的做，做完一件事再做下一件事，假如你的js要花一段比较长的时间做一件事的话，那么浏览器将会卡顿一段时间，不对用户的操作产生响应，这可咋办呢？谢天谢地，HTML5为我们提供了实现多线程的机制，这么好的东西，想必你早就再用了，不过没关系啊，咱们一块儿复习一下咯！

一、Worker类

　　1、方法介绍

　　（1）构造函数 new Worker(arg)  :参数表示你的线程要执行的代码所在的js文件，例如‘myworker.js’,构造函数当然是返回一个Worker类的实例

　　（2）worker.postMessage(message):这个方法表示从主线程向子线程发送消息或者子线程向主线程发送消息，message一般是一个字符串，也可以将一个js对象转成字符串发过去

　　（3）worker上还有一个message事件，当有人向这个worker实例发送消息时，该事件被触发，我们可以从他的事件对象的data属性中获得post过来的值

　　可以看到Woker类的API是相当简洁的，只有两个最常用的方法，一个事件，下面我们来通过实际的例子看看。

　　

//main.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>main</title>

</head>

<body>

    <div id="out"></div>

    <input type="text" name="" id="txt">

    <button id="btn">发送</button>

    <script type="text/javascript">

        var out = document.getElementById("out");

        var btn = document.getElementById("btn");

        var txt = document.getElementById("txt");

        var worker = new Worker("thread1.js");

        btn.addEventListener("click",function(){

            var postData = txt.value;

            worker.postMessage(postData);

        },false);

        worker.addEventListener('message',function(e){

            out.innerText = e.data;

        },false);

    </script>

</body>

</html>
//thread1.js

onmessage = function(event){

    var res = event.data+"帅气！";

    postMessage(res);

}

　　当我在文本框输入“大～熊”点击发送按钮就会出现如下效果

　　

　　简单分析分析，我在主线程由thead1.js创建了一个Worker的实例worker，当点击按钮时会调用他的postMessage方法，将文本框中的内容发送到thread1.js，我们的thread1.js怎么做的呢？是这样，他侦听message事件，主线程发送消息过来就触发这个事件，执行回调函数，回调函数从事件对象取得发送来的值，然后将这个值加上“帅气！”,然后在发送回去。主线程呢也侦听了worker的message事件，所以有消息过去时会触发，将消息内容显示在div中，如此就看到了上面的效果。

　　或许你会将这有什么用呢？这里确实没什么用，这里我们大可以在主线程还总完成加“帅气！”的操作，因为他的复杂度为O(1)(哈哈，最近在学算法！)，但是假如不是做这么简单的操作呢？这种方法的好处就是不过你的子线程做多么复杂的工作，都不会让主线程停下来，主线程改干嘛还干嘛，等到子线程把数据处理好了他直接拿过来就好了。

　　陆老师将可以在子线程中在调用new Worker()创建新的子线程，我发现这样是不可以的，会报undefined错误，也就是说子线程中是不能调用Worker构造函数的，一开始以为是自己错了，后来查阅了官方文档，发现也没有相关的描述。

　　下面看一个在主线程调用多个子线程的例子：

//main.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>main</title>

</head>

<body>

    <div id="out"></div>

    <input type="text" name="" id="txt">

    <button id="btn">发送</button>

    <script type="text/javascript">

        var out = document.getElementById("out");

        var btn = document.getElementById("btn");

        var txt = document.getElementById("txt");

        var worker1 = new Worker("thread1.js");

        var worker2 = new Worker("thread2.js");

        btn.addEventListener("click",function(){

            var postData = txt.value;

            worker1.postMessage(postData);

        },false);

        worker1.addEventListener('message',function(e){

            worker2.postMessage(e.data);

        },false);

        worker2.addEventListener('message',function(e){

            out.innerText = e.data;

        },false);

    </script>

</body>

</html>
//thread1.js

onmessage = function(event){

    var res = event.data+"帅气！";

        postMessage(res);

}
//thread2.js

onmessage = function(event){

    var res = event.data+"没骗你哟！";

    postMessage(res);

    close();

}

　　主线程要完成一个任务需要两个线程，它创建了两个线程worker1,2,先向worker1请求，得到返回的数据后，再请求worker2,同时将worker1处理之后的数据交给worder2处理，然后拿到最终结果，显示在页面上。

　　在子线程中可以引入其他的js文件然后调用，比如下边这个例子。

　　

//main.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>main</title>

</head>

<body>

    <div id="out"></div>

    <input type="text" name="" id="txt">

    <button id="btn">发送</button>

    <script type="text/javascript">

        var out = document.getElementById("out");

        var btn = document.getElementById("btn");

        var txt = document.getElementById("txt");

        var worker1 = new Worker("thread1.js");

        btn.addEventListener("click",function(){

            var postData = txt.value;

            worker1.postMessage(postData);

        },false);

        worker1.addEventListener('message',function(e){

            out.innerText = e.data;

        },false);

    </script>

</body>

</html>
//thread1.js

importScripts('tools.js')

onmessage = function(event){

    var res = handler(event.data);

        postMessage(res);

}
//tools.js

function handler(data){

    return data+"加油加油！"

}

　　可以看到我们的thread1.js并没有一个叫做tools.js的文件，但是它通过importScripts()导入了一个js文件，然后就可以调用里边暴露出来的方法了。

二、SharedWorker类

　　SharedWorker的实质在于share，不同的线程可以共享一个线程，他们的数据也是共享的。

　　直接用例子来探讨。

　　使用方法一：

//main.html

<!DOCTYPE HTML>

<head>

    <title>Shared workers: demo 1</title>

</head>

<body>

    <div id="log"></div>

<script>

  var worker = new SharedWorker('shared.js');

  var log = document.getElementById('log');

  worker.port.onmessage = function(e) { // note: not worker.onmessage!

    log.textContent += '\n' + e.data;

  }

</script>

</body>

</html>
//shared.js

onconnect = function(e) {

  var port = e.ports[0];

  port.postMessage('Hello World!');

}

　　这是从w3c拿得一个例子，下面先看第二种方法，再做分析

　　

<!DOCTYPE HTML>

<html>

<head>

    <title>Shared workers: demo 2</title>

</head>

<body>

<div id="log"></div>

<script>

  var worker = new SharedWorker('shared.js');

  var log = document.getElementById('log');

  worker.port.addEventListener('message', function(e) {

    log.textContent += '\n' + e.data;

  }, false);

  worker.port.start(); // note: need this when using addEventListener

  worker.port.postMessage('ping');

</script>

</body>

</html>　　
//shared

onconnect = function(e) {

  var port = e.ports[0];

  port.postMessage('Hello World!');

  port.onmessage = function(e) {

    port.postMessage('pong'); // not e.ports[0].postMessage!

    // e.target.postMessage('pong'); would work also

  }

}

　　第一种方法中是使用事件句柄的方式将听message事件，不需要调用worker.port.start(),第二种方法是通过addEventListener()方法监听message事件，需要worker.port.start()方法激活端口。他们不同于worker，当有人和他通信时触发connect事件，然后他的message事件是绑定在messagePort对象上的，不想worker那样，你可以回头看看worker是怎么做的。

　　那么sharedWorker是怎么共享数据的呢？请看下面的例子。

　　

//main1 和main2都是这样

<!DOCTYPE HTML>

<html>

<head>

    <title>Shared workers: demo 2</title>

</head>

<body>

<div id="log"></div>

<input type="text" name="" id="txt">

<button id="get">get</button>

<button id="set">set</button>

<script>

  var worker = new SharedWorker('shared.js');

  var get = document.getElementById('get');

  var set = document.getElementById('set');

  var txt = document.getElementById('txt');

  var log = document.getElementById('log');

  worker.port.addEventListener('message', function(e) {

    log.innerText = e.data;

  }, false);

  worker.port.start(); // note: need this when using addEventListener

  set.addEventListener('click',function(e){

      worker.port.postMessage(txt.value);

  },false);

  get.addEventListener('click',function(e){

      worker.port.postMessage('get');

  },false);

</script>

</body>

</html>
//shared

var data;

onconnect = function(e) {

  var port = e.ports[0];

  port.onmessage = function(e) {

    if(e.data=='get'){

        port.postMessage(data);

    }else{

        data=e.data;

    }

  }

}

　　这里分析一波，我们在main1.html的文本框输入数据，点击set，然后在main2.html中点击get法现能够获取到我们在main1.html中设置的数据，这说明我们的sharedWorker事实上是单例的，就像java中的static类一样，不管new多少个，实际上只有一个，这样我们的不同线程就可以共享到sharedWorker中的数据了。这里把图给上，记得有篇文章没给图，然后有人给我建议了，问能不能给图。

　　

　　最后来小结一下，worker和sharedWorker没有什么悬糊的，就是把台前的工作搬到幕后去做，不打断台前的工作。正所谓台上十分钟，台下十年功，如果你把台下的十年供放到台上做，观众的唾沫星子早就把你淹死了，所以说那些费事费力的工作还是放到台下去，台上只用展示你最好的一面的好了，十分钟足以！

　　最最后，如果您觉得我的文章对您有所帮助的话，不妨关注一下我，您的支持是对我最大的鼓励。

　　参考：

　　html5与css3权威指南上册（陆）

　　https://www.w3.org/TR/2015/WD-workers-20150924/#dedicated-workers-and-the-dedicatedworkerglobalscope-interface

HTML5新特性-多线程（Worker SharedWorker）的更多相关文章

  1. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  2. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  3. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  4. Redis 6.0 新特性-多线程连环13问！

    Redis 6.0 来了 在全国一片祥和IT民工欢度五一节假日的时候,Redis 6.0不声不响地于5 月 2 日正式发布了,吓得我赶紧从床上爬起来,学无止境!学无止境! 对于6.0版本,Redis之 ...

  5. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  6. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  7. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  8. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  9. HTML5新特性：范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

随机推荐

  1. 第十七篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示下）

    前些时候用换了工作,本来是用的前端框架是easyui,后面用的是bootstrap.对于我来说虽然不是新东西,因为原来毕业时候用过一段时间,也不懂什么插件的开发,现在用过easyui后觉得easyui ...

  2. Oracle主键异常处理

    Hibernate: insert into test1.WarnWeather (WAREA, wdate, WDAYS, WINFO, WTYPE, WNO) values (?, ?, ?, ? ...

  3. UI培训就业会很难吗

    众所周知UI是研究人机交互的学科,他是从互联网发展而来的,单从目前它的应用领域来看,主要应用于软件.互联网.移动智能设备.游戏和虚拟现实影音方面.这些都是新兴的热门方向和活跃领域.目前人才缺口和社会需 ...

  4. Yii 2.0 ActiveForm生成表单 ，控制表单label和filed样式,filed一旦报错，前面lable颜色跟着变,看图，帮你解决

    需要生成如下图的表单样式,图一:

  5. [ZooKeeper.net] 1 模仿dubbo实现一个简要的http服务的注册 基于webapi

    今天来试着模仿下dubbo实现一个简要的http服务的注册,虽说是模仿不过是很廉价的那种,只是模仿了一点点点...... 先放上demo目录结构: 开头还是把ZooKeeper的一些简要介绍搬过来看看 ...

  6. Web纯前端“旭日图”实现元素周期表

    一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...

  7. Java体系结构---垃圾回收

    1 垃圾回收 1.1 JVM的体系结构 1.1.1  JVM 相当与JAVA 的操作系统,是运行JAVA Class文件的程序. 1.1.2  JVM体系 监控调优,运行时内存结构,类加载,calss ...

  8. PHP解耦的三重境界（浅谈服务容器）

    阅读本文之前你需要掌握:PHP语法,面向对象 在完成整个软件项目开发的过程中,有时需要多人合作,有时也可以自己独立完成,不管是哪一种,随着代码量上升,写着写着就"失控"了,渐渐&q ...

  9. iOS回顾笔记（06） -- AutoLayout从入门到精通

    iOS回顾笔记(06) -- AutoLayout从入门到精通 随着iOS设备屏幕尺寸的增多,当下无论是纯代码开发还是Xib/StoryBoard开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...

  10. hdoj 1175 (bfs)

    题意: 判断两点之间是否可以通过至多有两次转变方向以达到相连,就是平时玩的连连看游戏,但是不能从外面绕过去. 思路:bfs,给每个加入的队列的点添加转变方向次数turn和点当前要走的方向dir属性,起 ...