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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。