javascript本身就是一个单线程的语言，一开始它的出现是为了简单的网页设计，设计者并没有考虑到多线程的问题，要知道，线程的开销是非常昂贵的。但是随着web开发的潮流化，javascript不是仅仅一门网页脚本语言那么简单了，它可以涉及到socket(websocket),canvas等复杂的操作,这时候单线程的计算远远不够,在此时html5引入了webworker(多线程)对象，用于实现js的多线程操作,虽然本身js还是门单线程的语言，实现多线程是基于Event loop的实现,这里介绍更加详细http://blog.jobbole.com/30445/。

1.webworker分为Worker（专用线程） 和 SharedWorker（共享线程）两种，都必须遵守同源策略

同源策略：

为了能和服务器交互，worker必须遵守同源策略（same-origin policy）(译注：可参考国人文章同源策略)。比如，位于http://www.example.com/内的脚本文件不能访问https://www.example.com的脚本。尽管域名相同，但同源策略要求端口也必须一致。通常，这不会成为一个很大的问题。但是你很有可能会同一个域名编写worker和client，所以知道这点对你总是有所帮助。

（1）Worker(专用线程)一般用于交换信息，而不是共享信息，而SharedWorker则用于共享信息

（2）因为worker一般都是在后台运行的，所以不建议在worker中访问DOM,并进行一系列的DOM操作

2.在这里为了粗略介绍，我们只讲Worker(专用线程),有兴趣了解ShareWorker的可以在这里参考

我们将会做一个加载图片的demo,其中有三个文件:test.html,Fthread.js(父线程),Sthread.js(子线程)，test.png位于web服务器网站的根目录下

test.html

<!DOCTYPE html>

<html>

<body>

</body>

<script src="Fthread.js"></script>

</html>

Fthread.js

var worker = new Worker("Sthread.js"); 创建一个子进程

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

    e = window.event || e; //加入一些js hack

    var imgSrc = e.data;   //收到子进程传递过来的数据

    //创建一个图片便签并在页面显示图片

    var img = document.createElement("img");

    img.src = imgSrc;

    document.body.appendChild(img);

   /*由父进程关闭终止子进程*/

    //this.terminate();

});

//很重要,不可少，这个将会触发向子进程的请求

worker.postMessage("begin");

Sthread.js

//当收到父进程传递过来的消息时，子进程响应，发回图片url

onmessage = function(e){

    e = window.event || e;

    if (e.data === "begin") {

   postMessage("test.png");

}

}

this.close();//关闭子进程

}

　　

需要注意的是，chrome不支持本地测试，最好使用其他浏览器测试。

3.除次之外，我们还可以进行线程嵌套，即子线程再创建一个子进程，只需要在Sthread.js作些修改

//当收到父进程传递过来的消息时，子进程响应，发回图片url

onmessage = function(e){

    e = window.event || e;

    if (e.data === "begin") {

       var worker = new Worker("SSThread.js");//再创建子进程

       worker.onmessage = function(e1) {

            e1 = window.event || e1;

      postMessage(e1.data);  //返回图片url到父进程

}

       worker.postMessage("get url");

}

this.close();//关闭子进程

}

SSthread.js

//当收到父进程传递过来的消息时，子进程响应，发回图片url

onmessage = function(e){

    e = window.event || e;

    if (e.data === "get url") {

      postMessage("test.png");  //返回图片url到父进程

}

}

this.close();//关闭子进程

}

关于线程嵌套的内容暂时讲到这里了，小弟也是初学，还有很多需要尝试和学习。若有什么出错的地方，欢迎指出

html5---webworker多线程的更多相关文章

  1. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  2. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  3. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  4. 深入 HTML5 Web Worker 应用实践：多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  5. 基于 HTML5 的 Web SCADA 报表

    背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求.一个完整的报表,一般包含了筛选操作区.表格.Chart.展板等多种元素,而其中的数据表格是最常用的控件.在以往的工业项目 ...

  6. 关于webWorker的理解和简单例子

    一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...

  7. JavaScript单线程和浏览器事件循环简述

    JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...

  8. 再看JavaScript线程

    继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题): 代码判断一: <div i ...

  9. postMessage和sendMessage

    参考:http://www.cnblogs.com/giggle/p/5350288.html(浅谈webWorker) http://blog.csdn.net/zha_zi/article/det ...

随机推荐

  1. ActionResult 常见问题

    1:在Asp.net Mvc 2中由于对数据的保护,当返回类型为JsonResult时 ,默认情况下request需要为post.(可使用   return Json(person,JsonReque ...

  2. LENGTH和LENGTHB函数，substrb截取也是同一个道理。

    oracle 利用 LENGTH和LENGTHB函数区分中英文(2009-02-07 10:49:29) 转载▼ 标签: it 分类: oracle 前一段时间,我一朋友问我怎么得出这个字符串是中文还 ...

  3. 无软驱加载raid驱动安装windows2003及其他微软操作系统

    [转载]http://blog.zol.com.cn/2650/article_2649199.html [另一篇]http://www.blue1000.com/bkhtml/c159/2013-0 ...

  4. PictureBox内的图片拖动功能

    当 PictureBox内的图片太大,超过PictureBox边框时可以用下面的方法来实现,   通过重绘来实现 :   Code bool wselected = false;  Point p = ...

  5. 基于ProGuard-Maven-Plugin的自定义代码混淆插件

    介绍 大家可能都会碰到一些代码比较敏感的项目场景,这个时候代码被反编译看到就不好了,这个时候就需要代码混淆插件来对代码进行混淆了. 基于Maven的项目一般会去考虑使用proguard-maven-p ...

  6. 【BZOJ3110】【整体二分+树状数组区间修改/线段树】K大数查询

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c 如果是2 a b c形式,表示询问从第a个位置到第b个位 ...

  7. U盘美化（更换U盘logo和页面背景软件）

    U盘内新建txt文本后,输入 [autorun] ICON=ooopic_1459309050.ico 保存的文件名包括后缀更改为autorun.inf 必须为icon图标

  8. MBR

    Mbr位于磁盘的0柱面,0磁头,1扇区. MBR       有三部分构成,主引导程序,硬盘分区表DPT和,硬盘的有效标志55AA.在512个字节的主引导扇区里. 主引导程序占446个字节,dpt占6 ...

  9. PHPCMS二层栏目调用

    {pc:content action="category" catid="0" num="25" siteid="$siteid& ...

  10. Git配置安装使用教程操作github上传克隆数据

    Git是何方神圣? Git是用C语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历史记录状态).另一个状态可以是不同的文件,也可以是不同的文件内容 ...