【阅读】《head first html5》第十章——《运用javascript》实际上的javascript线程

  • 如果没有web工作线程,javascript是单线程的,这说明它一次只能做一件事情
  • 如果交给一个javascript程序太多的工作,可能收到一个脚本运行缓慢的对话框(这是应该要优化下你的代码了)
  • web工作线程在一个单独的线程处理任务,所以主javascript代码可以继续运行,用户界面可以保持响应
  • web工作线程的代码放在与页面代码不同的一个单独的文件
  • web工作线程不能访问也买你代码中的函数或DOM
  • 页面中的代码与web工作线程通过消息通信(主要通过event.data来传递信息)
  • 要想一个工作线程发送消息,可以使用postMessage
  • 可以通过postMessage向工作线程发送字符串和对象,但不能像工作线程发送函数
  • 可以将工作线程的onmessage属性设置为一个处理函数,来接受由工作线程返回的消息
  • 工作线程将其onmessage属性设置为一个处理函数,来接收页面代码发送的消息
  • 一个工作线程准备发回一个结果时,会调用postMessage,并传入结果作为参数
  • 工作线程结果封装在一个事件对象中,并置于data属性
  • 可以使用event.target属性查找那个工作线程发出了消息
  • 消息在主页面代码和工作线程之间会复制(类似java的传参,而不是像C++的指针,所有传入的参数都是副本),而非共享
  • 可以使用多个工作线程完成能分解为多个任务的大规模计算,如计算一个分形可视化图像或对光线跟踪图像
  • 每个工作线程在他自己的线程中运行,所以如果你的计算机有一个多核处理器,工作线程会并行运行,这回提高计算的速度
  • 可以从页面代码调用的worker.terminate()来终止一个线程。这回终止工作线程脚本。工作线程还可以调用close()让自己停止工作
  • 工作线程还有一个onerror属性。可以把这个属性设置为一个错误处理函数,如果你的工作线程存在一个脚本错误就会调用这个处理函数
  • 要在工作线程文件中包含和使用javascript库,可以使用importScripts
  • 还可以使用importScripts来利用JSONP。要在工作线程文件中实现传入URL查询的回调(这点没弄懂)
  • 工作线程不能方位DOM或主代码中的函数,但是可以使用XMLHttpRequest和本地存储

小例子

在test.html文件
<!doctype html>
<html>
<head>
<Meta charset="utf-8">
<title>工作线程Demo</title>
<script src="worker.js"></script>
</head>

<body>
<input type="text" placeholder="尝试对一个工作线程喊话" id="message">
<input type="button" onClick="send()" value="发送">
</body>
<script>
var worker = new Worker("worker.js");
function send() {
	var message = document.getElementById("message").value;
	worker.postMessage(message);
	worker.onmessage = function(event){
		//这里是线程回复我的信息
		alert(event.data);
	};
}
</script>
</html>

在worker.js文件
// JavaScript Document
onmessage = function(event) {
	postMessage("你刚才说的是:"+event.data);
};

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码