web worker 是运行在后台的 JavaScript,不会影响页面的性能
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。
WEB主线程:1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。2.通过worker.postMessage( data ) 方法来向worker发送数据。3.绑定worker.onmessage方法来接收worker发送过来的数据。4.可以使用 worker.terminate() 来终止一个worker的执行。
worker新线程:1.通过postMessage( data ) 方法来向主线程发送数据。2.绑定onmessage方法来接收主线程发送过来的数据。
html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<!-- 请设置页面标题-->
<title>WEB-API test case unit4Dir</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<!-- <meta name="page-view-size" content="1280*720"> -->
<!-- //link标签用于引用功能目录/common_css下的dir.css文件,请修改href的引用路径 -->
<link rel="stylesheet" type="text/css" href="../common_css/dir.css">
<!-- 若还有其他css文件请在这里引用 -->
<!--<link rel="stylesheet" type="text/css" href="#">-->
<!-- javascript脚本,请尽量编写在下面的script标签中 -->
<script charset="gb2312" type="text/javascript" src="../lib_js/dvbPublic.js"></script>
<script charset="gb2312" type="text/javascript" src="../lib_js/ngbEvent.js"></script>
<script charset="gb2312" type="text/javascript" src="../lib_js/ngbPathString.js"></script>
<script charset="gb2312" type="text/javascript" src="lib_js/SmartHome_04.js"></script>
<SCRIPT LANGUAGE="JavaScript">
//这里处理翻页键
document.onkeydown = grabEvent_h;
document.onsystemevent = grabEvent_h;
function grabEvent_h(){
grabEvent();
}
function broadcast_case()
{
//setTimeout("XXXXX()",100);
test();
return;
}
</SCRIPT>
</HEAD>
<BODY οnlοad="broadcast_case()">
<div class="css_jiaobiao">用例编号:</div>
<div class="css_title"> caseSmartHome_04</div>
<table class="css_tablebody" cellspacing=0 cellpadding=4>
<tr>
<td width=112 valign='top'>测试内容:</td>
<td>
SmartHome.broadcast(int packetInterval, int groupInterval):<br>
通过广播方式发送wifi配置信息。<br>
packetInterval - number型。信息包的时间间隔。
groupInterval - number型。信息包组的时间间隔
</td>
</tr>
<tr>
<td valign='top'>前置条件:</td>
<td>无</td>
</tr>
<tr>
<td valign='top'>测试步骤:</td>
<td>点击"XXXXXXXXXX"按钮<br>
</td>
</tr>
<tr>
<td valign='top'>预期结果: </td>
<td>
返回:0 : 表示成功。 非0 : 表示失败。 </td>
</tr>
</table>
<hr size=3 color='#747474' width="99%" align=left>
<input type=button value="广播发送wifi配置信息" οnclick="broadcast_case()">
<div id=result class="css_div_body"></div>
<hr size=3 color='#747474' width="99%" align=left>
<table class="css_tablebody" cellspacing=0 cellpadding=0>
<tr>
<td height=30 width="35%">
<a href="caseSmartHome_03.html">prev-case</a>
<a href="caseSmartHome_05.html">next-case</a>
</td>
<td width="65%" align=right>
<!--//return 即 "返回上级"页面,请改为实际链接地址路径 -->
<a href="unit16_index.html">return</a> 【PageUp】【PageDown】键可翻页
</td>
</tr>
</table>
</BODY>
</HTML>
js文件
var str="";
function grabEvent(){
var val = event.which;
switch (val) {
case EVENT_KEY_PAGEUP: //page up
window.location.href=U16_SmartHome_03_index_Dir_URL;//上一个页面,如果没有上一个页面请注释掉
break;
case EVENT_KEY_PAGEDOWN: //page down
window.location.href=U16_SmartHome_05_index_Dir_URL;//下一个页面,如果没有下一个页面请注释掉
break;
case EVENT_KEY_EXIT:
case EVENT_KEY_BACK:
window.location.href = U16_SmartHome_Channel_PATH_URL;
break;
//处理需要的按键或消息
}
}
function test()
{
/*
var worker = new Worker("demoTest.js");
//worker.addEventListener("message", function(e){ alert("gfd");}, false);
alert("fdgs");
worker.onmessage=function(event){alert("fdgs");}
*/
var w;
w=new Worker("./lib_js/demoTest.js");
w.onmessage=function(event){ alert("onmessage");alert(event.data);}
worker.postMessage("hello world"); //向worker发送数据
str+=" XXXXXXXXX "+typeof(w)+"....<br>";
$("result").innerHTML=str;
}
demoTest.js
function fun(){
postMessage("rtr");
str+=" ֹͣhgjhk...<br>";
$("result").innerHTML=str;
}
onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}fun();