html5 workers线程

时间 2019-12-01

原文原文链接

html5以前，javascript脚本都是在单线程中执行的，也就是说若是js运行时间过长，除了等待什么也干不了，甚至卡死。建立一个worker后台线程，这样就不影响前台的渲染了。
简单演示主页面javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 workers</title>
 
</head>
 
<body>
<span id="span1">5</span>
<div id="result">结果</div><script type="text/javascript"> var value = +document.getElementById('span1').innerHTML; var work = new Worker('work.js'); work.onmessage = function(event){ 	document.getElementById('result').innerHTML = event.data; } window.onload = function(){ 	work.postMessage(value); } </script> </body>
</html>

work.js页面代码html

onmessage = function(event){ 	var result = event.data + 10;	
	postMessage(result); }

示例简单说明
创建一个后台线程很简单，只要创建一个带有js文件参数的Worker()实例。运行上面内容，”结果”会被”15″替换。
主页面和js页面都经过onmessage()事件句柄来接收数据，此方法可传入一个event事件对象，event.data就是实际传递的数据。
主页面和js页面都经过html5的postMessage方法发送数据。html5

注意事项
后台线程脚本文件不能访问document对象和window对象，若是访问会报错。主页面方法都是work实例调用的，而在线程脚本中是直接调用的。java

其余相关
为了节省资源，work使用完毕后最好关闭，使用close()方法，work.close()。关闭后没法打开，只能新建。
线程能够嵌套。
如需在线程js中引入其余Js文件，能够使用importScript(urls)方法web

importScript('script1.js','js\script2.js');

本文地址http://www.chengxuyuans.com/web_technology/10075.htmlpost