html5---webworker多线程
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多线程的更多相关文章
- 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它 打个比方:<海贼王> ...
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- 深入HTML5 Web Worker应用实践：多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- 深入 HTML5 Web Worker 应用实践：多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...
- 基于 HTML5 的 Web SCADA 报表
背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求.一个完整的报表,一般包含了筛选操作区.表格.Chart.展板等多种元素,而其中的数据表格是最常用的控件.在以往的工业项目 ...
- 关于webWorker的理解和简单例子
一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...
- JavaScript单线程和浏览器事件循环简述
JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...
- 再看JavaScript线程
继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题): 代码判断一: <div i ...
- postMessage和sendMessage
参考:http://www.cnblogs.com/giggle/p/5350288.html(浅谈webWorker) http://blog.csdn.net/zha_zi/article/det ...
随机推荐
- java中json转xml
参考:http://heipark.iteye.com/blog/1394844 需要json-lib-2.1-jdk15.jar和xom-1.2.5.jar,maven pom.xml如下: xml ...
- 菜鸟学开店—自带U盘的打印机
本文旨在提供最简单.便宜.有效的解决方案,解决普通用户最困扰的问题.今天提供普通用户一个低价的小票打印机驱动安装解决方案 相信很多用户都碰到过这种情况,电脑的重装了系统,打印机的驱动没有备份,要用打印 ...
- VMware复制Centos6虚拟机要改的地方
1.删除文件 /etc/udev/rules.d/70-persistent-net.rules (它会绑定你网卡信息) 2.重新配置 # vi /etc/sysconfig/network-scr ...
- kvo深入浅出举例
一,概述 KVO,即:Key-Value Observing,它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知.简单的说就是每次指定的被观察的对象的属性被修改后,KVO就会自动通知 ...
- iOS中JavaScript和OC交互
转载自:http://www.devzeng.com/blog/ios-uiwebview-interaction-with-javascript.html 还可参考的文章:http://blog.c ...
- Objective-C消息机制的原理
http://desheng.me/2012/03/31/objective-c%E6%B6%88%E6%81%AF%E6%9C%BA%E5%88%B6%E7%9A%84%E5%8E%9F%E7%90 ...
- 对 const char* const &a 的理解
定义中用到&是独立引用. 比如: char i; char &a=i; 表示a是i的一个单独引用. 当有i='a'时,也有a='a'; 当有a='c'时,也有i='c'; 两个变量的标 ...
- Struts2中的链接标签 <s:url>和<s:a>---在action中获取jsp表单提交的参数(转)
转自:http://sgl124764903.iteye.com/blog/444183 1.普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page ...
- LGDT/LIDT-加载全局/中断描述符表寄存器
将源操作数中的值加载到全局描述符表寄存器 (GDTR) 或中断描述符表寄存器 (IDTR).源操作数指定 6 字节内存位置,它包含全局描述符表 (GDT) 或中断描述符表 (IDT) 的基址(线性地址 ...
- jQuery备忘录--私家版
最近在看jQuery,总是看过了忘,不知道该怎么办?准备开启洗脑模式,日常念一念,紧箍咒加身. 1.jQuery方法第一步:ready=>加载html的骨架.而onload=>整个页面加载 ...