Web Workers

  • H5规范提供的js分线程实现
  • 解决了js执行时,页面被冻结的问题

相关API

  • Worker: 构造函数,加载分线程执行的js文件
  • Worker.prototype.onmessage: 用于接收另一个线程的回调函数
  • Worker.prototype.postMessage: 向另一个线程发送消息

不足

  • worker内代码不能操作DOM(更新UI)
  • 不能跨域加载JS
  • 不是所有浏览器都支持这个特性

示例代码

<body>
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script type="text/javascript">
	var input = document.getElementById('number')
	document.getElementById('btn').onclick = function() {
		var number = input.value
		// 创建一个Worker对象
		var worker = new Worker('worker.js')
		// 绑定接收消息的监听
		worker.onmessage = function(event) {
			console.log("主线程接收分线程返回的数据: " + event.data)
		}

		// 向分线程发送消息
		worker.postMessage(number)
		console.log("主线程向分线程发送数据: " + number)
	}
</script>
</body>

================================================================================================================================================================================
// worker.js
function fib(n) {
	return n<=2 ? 1 : fib(n-1) + fib(n-2)
}
// 变量名onmessage是固定的
var onmessage = function(event) {
	var number = event.data
	console.log("分线程接收到主线程发送的数据: " + number)
	var result = fib(number)
	postMessage(result)
	console.log("分线程向主线程返回数据: " + result)
}
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐