Javascript执行机制
      在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setinterval 方法,setTimeout 方法等),但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 Javascript 引擎可以并发地执行 Javascript 代码,从而实现了对浏览器端多线程编程的良好支持。

Javascript中的多线程 - WebWorker
      HTML5 中的 Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker。两种类型的线程各有不同的用途。

专用型web worker

  专用型worker与创建它的脚本连接在一起,它可以与其他的worker或是浏览器组件通信,但是他不能与DOM通信。专用的含义,就是这个线程一次只处理一个需求。专用线程在除了IE外的各种主流浏览器中都实现了,可以放心使用。
创建线程
      创建worker很简单,只要把需要在线程中执行的JavaScript文件的文件名传给构造函数就可以了。

线程通信
      在主线程与子线程间进行通信,使用的是线程对象的postMessage和onmessage方法。不管是谁向谁发数据,发送发使用的都是postMessage方法,接收方都是使用onmessage方法接收数据。postMessage只有一个参数,那就是传递的数据,onmessage也只有一个参数,假设为event,则通过event.data获取收到的数据。

发送JSON数据
      JSON是JS原生支持的东西,不用白不用,复杂的数据就用JSON传送吧。例如:

postMessage({'cmd': 'init', 'timestamp': Date.now()});

处理错误
      当线程发生错误的时候,它的onerror事件回调会被调用。所以处理错误的方式很简单,就是挂接线程实例的onerror事件。这个回调函数有一个参数error,这个参数有3个字段:message - 错误消息;filename - 发生错误的脚本文件;lineno - 发生错误的行。

销毁线程
      在线程内部,使用close方法线程自己销毁自己。在线程外部的主线程中,使用线程实例的terminate方法销毁线程。

HTML代码:

<script type="text/javascript">
  onload = function(){
      var worker = new Worker('fibonacci.js');  
      worker.onmessage = function(event) {
        console.log("Result:" + event.data);
      };
      worker.onerror = function(error) {
        console.log("Error:" + error.message);
      };
      worker.postMessage(40);
  }  
  </script>
脚本文件fibonacci.js代码:
//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);
    postMessage(fibonacci(n));
};

把它们放到相同的目录,运行页面文件,查看控制台,可以看到运行的结果。
这里还有一点,在主线程中,onmessage事件可以使用另外一种方式挂接:

worker.addEventListener('message', function(event) {
   console.log("Result:" + event.data);
}, false);

个人觉得很麻烦,不如用onmessage直接。

使用其他脚本文件
      工作线程可以使用全局方法importScripts来加载和使用其他的域内脚本文件或者类库。例如下面都是合法的使用方式:

importScripts();                        
importScripts('foo.js');                
importScripts('foo.js', 'bar.js');      

导入以后,可以直接使用这些文件中的方法。看一个网上的小例子:

 
 importScripts('math_utilities.js'); 
 
 onmessage = function (event) 
 { 
   var first = event.data.first; 
   var second = event.data.second; 
   calculate(first,second); 
 }; 
 
 function calculate(first,second) { 
    //do the calculation work 
   var common_divisor=divisor(first,second); 
   var common_multiple=multiple(first,second); 
   postMessage("Work done! " + 
      "The least common multiple is " + common_divisor  +
      " and the greatest common divisor is "+common_multiple); 
 } 

网上也有网友想到了利用这里的importScripts方法解决资源预加载的问题(浏览器预先加载资源,而不会对资源进行解析和执行),道理也很简单。

线程嵌套
      在工作线程中还可以在创建子线程,各种操作还是一样的。

同步问题
      Worker没有锁的机制,多线程的同步问题只能靠代码来解决(比如定义信号变量)。

共享型SharedWebWorker
  共享型web worker主要适用于多连接并发的问题。因为要处理多连接,所以它的API与专用型worker稍微有点区别。除了这一点,共享型web worker和专用型worker一样,不能访问DOM,并且对窗体属性的访问也受到限制。共享型web worker也不能跨越通信。
  页面脚本可以与共享型web worker通信,然而,与专用型web worker(使用了一个隐式的端口通信)稍微有点不同的是,通信是显式的通过使用一个端口(port)对象并附加上一个消息事件处理程序来进行的。

  在收到web worker脚本的首个消息之后,共享型web worker把一个事件处理程序附加到激活的端口上。一般情况下,处理程序会运行自己的postMessage()方法来把一个消息返回给调用代码,接着端口的start()方法生成一个有效的消息进程。
      看网上能找到的的唯一个例子:创建一个共享线程用于接收从不同连接发送过来的指令,然后实现自己的指令处理逻辑,指令处理完成后将结果返回到各个不同的连接用户。
HTML代码:

<script> 
  var worker = new SharedWorker('sharedworker.js'); 
  var log = document.getElementByIdx_x_x_x_x('response_from_worker'); 
  worker.port.addEventListener('message', function(e) { 
  //log the response data in web page 
  log.textContent =e.data; 
  }, false); 
  worker.port.start(); 
  worker.port.postMessage('ping from user web page..'); 
  
  //following method will send user input to sharedworker 
  function postMessageToSharedWorker(input) 
  { 
  //define a json object to construct the request 
  var instructions={instruction:input.value}; 
  worker.port.postMessage(instructions); 
  } 
  </script> 
 

脚本文件代码:

 // 创建一个共享线程用于接收从不同连接发送过来的指令,指令处理完成后将结果返回到各个不同的连接用户。
 var connect_number = 0; 
 
 onconnect = function(e) { 
  connect_number =connect_number+ 1; 
  //get the first port here 
  var port = e.ports[0]; 
  port.postMessage('A new connection! The current connection number is ' 
  + connect_number); 
  port.onmessage = function(e) { 
   //get instructions from requester 
   var instruction=e.data.instruction; 
   var results=execute_instruction(instruction); 
    port.postMessage('Request: '+instruction+' Response '+results 
      +' from shared worker...'); 
  }; 
 }; 
 function execute_instruction(instruction) 
 { 
 var result_value; 
 //implement your logic here 
 //execute the instruction... 
 return result_value;
 } 

在上面的共享线程例子中,在主页面即各个用户连接页面构造出一个共享线程对象,然后定义了一个方法 postMessageToSharedWorker 向共享线程发送来之用户的指令。同时,在共享线程的实现代码片段中定义 connect_number 用来记录连接到这个共享线程的总数。之后,用 onconnect 事件处理器接受来自不同用户的连接,解析它们传递过来的指令。最后,定义一个了方法 execute_instruction 用于执行用户的指令,指令执行完成后将结果返回给各个用户。

这里我们并没有跟前面的例子一样使用到了工作线程的 onmessage 事件处理器,而是使用了另外一种方式 addEventListener。实际上,前面已经说过,这两种的实现原理基本一致,只是在这里有些稍微的差别,如果使用到了 addEventListener 来接受来自共享线程的消息,那么就要先使用 worker.port.start() 方法来启动这个端口。之后就可以像工作线程的使用方式一样正常的接收和发送消息。

线程中能做的事
1.能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数。
2.能使用navigator对象。
3.能使用XMLHttpRequest来发送请求。
4.可以在线程中使用Web Storage。

5.线程中可以用self获取本线程的作用域。

线程中不能做的事
1.线程中是不能使用除navigator外的DOM/BOM对象,例如window,document(想要操作的话只能发送消息给worker创建者,通过回调函数操作)。
2.线程中不能使用主线程中的变量和函数。
3.线程中不能使用有"挂起"效果的操作命令,例如alert等。
4.线程中不能跨域加载JS。

线程也是需要消耗资源的,而且使用线程也会带来一定的复杂性,所以如果没有充足的理由来使用额外的线程的话,那么就不要用它。

HTML5之Javascript多线程的更多相关文章

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

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

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

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

  3. 【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork

    原文链接:http://www.cnblogs.com/woodk/articles/5199536.html JavaScript多线程,在HTML5 WebWork没出现之前很多人都是用Concu ...

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

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  5. HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

  6. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  7. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  8. 高性能动画!HTML5 Canvas JavaScript框架KineticJS

    高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...

  9. 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况

    CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...

随机推荐

  1. opencv附加依赖性选择,提示找不到opencv_world400d.dll

    连接器>>输入>>附加依赖项,添加opencv_world400d.lib库文件名,在....\opencv\build\x64\vc14\lib有2个lib文件, 带d的是d ...

  2. Anaconda+django写出第一个web app(十)

    今天继续学习外键的使用. 当我们有了category.series和很多tutorials时,我们查看某个tutorial,可能需要这样的路径http://127.0.0.1:8000/categor ...

  3. Zookeeper笔记之使用zk实现集群选主

    一.需求 在主从结构的集群中,我们假设硬件机器是很脆弱的,随时可能会宕机,当master挂掉之后需要从slave中选出一个节点作为新的master,使用zookeeper可以很简单的实现集群选主功能. ...

  4. VBScript操作SFTP

    示例代码主要通过VBScript实现对SFTP的上传下载功能 ' Return yyyyMM base on current date Function FormatCurrentDate() Cur ...

  5. Mysql导入脚本失败,提示需要SUPER权限

    1.删除: /*!50013 DEFINER=`root`@`localhost` SQL SECURITY DEFINER */ 2.查看增删函数有没有重复 3.删除: set GLOBAL log ...

  6. 关于USBHID协议以及鼠标键盘描述符的解释【转】

    转自:https://blog.csdn.net/jiujiujiuqiuqiuqiu/article/details/47277685 一.HID设备识别 前面有提到关于SCSI协议的USB设备实现 ...

  7. Linux6.5 安装Python3.X(转载)

    1.获取Python 3.6.3 通过官网https://www.python.org/downloads/下载Python 3.4.3源码: 源码获取命令如下:wget https://www.py ...

  8. SSD安装记录

    这两天配置SSD,折腾了一两天,终于搞定了,记录下自己遇到的大坑. 1.安装SSD 安装参考:http://blog.csdn.net/shawncheer/article/details/53227 ...

  9. GeoHash解析及java实现

    GeoHash解析请参考这里: http://www.open-open.com/lib/view/open1417940079964.html java实现GeoHash,代码已注释. import ...

  10. ajax test

    (function ($) { function loadNode(obj){ obj.closest('.filter').find('.item').removeClass('select'); ...