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. Getting Started with Testing ——开始单元测试

    Android tests are based on JUnit, and you can run them either as local unit tests on the JVM or as i ...

  2. mysql数据库优化日志(更)-howyue

    1)记一次首页查询优化 优化前: 优化后: 主要优化: 1.select查询只查询需要字段: 2.where条件字段添加索引:

  3. angular调用WCF服务,读取文件夹下图片显示列表,下载另存为图片

    读取文件夹下的文件 public string ReadImagesPaths() { string result = string.Empty; try { string path = System ...

  4. 使用IDEA,利用SpringMVC框架建立HelloWorld项目

    无论是从头开始学习一门新的语言还是技术,我们的入门都是从HelloWorld开始,也许就是因为这样,我在学习Spring MVC的时候,就有一种偏执,一定要写出一个HelloWorld来.研究了好久, ...

  5. slice的用法与用量

    用法:slice用于从指定值截取并返回新数组,但原数组结构不变 arrayObject.slice(start,[end]) 起始值可以为负数,-1为最后一个,end选填,但取不到end坐标的值,实际 ...

  6. 【Linux】常用命令

    一.文件结构     /:       根目录 /bin:    系统所需要的那些命令位于此目录. /boot:   Linux的内核及引导系统程序所需要的文件目录,GRUB或LILO系统引导管理器也 ...

  7. Flask_SqlAlchemy 1215, 'Cannot add f oreign key constraint'

    Flask_SqlAlchemy 1215, 'Cannot add f oreign key constraint'报错 sqlalchemy.exc.IntegrityError: (pymysq ...

  8. 由lib引发的血案(opencv找不函数问题)

    在使用opencv中的函数时,连续两次遇到函数找不到的问题,第一次查时按照他人说的包含进一个头文件后,果真还真解决了:然而第二次在调用cvInpaint函数时包含进对应头文件,编译通过但运行不成功还是 ...

  9. vim技巧:折叠快捷键

    vim技巧:折叠快捷键 以前用的挺熟的,一段时间不用了,快捷键又忘了,不得不重新再看手册,今天专门整理一下,以后查找起来也比较方便. zc 折叠,只折叠最外层的折叠zC 对所在范围内所有嵌套的折叠点进 ...

  10. nginx+uwsgi+django

    上一涨讲解了如何使用nginx+uwsgi部署wsgi application 其实django配置方式和 application都一样,因为如果我们对application进行扩展就是一个WSGI ...