H5 Web Workers多线程
Web WorkersH5规范提供的js分线程实现解决了js执行时,页面被冻结的问题相关APIWorker: 构造函数,加载分线程执行的js文件Worker.prototype.onmessage: 用于接收另一个线程的回调函数Worker.prototype.postMessage: 向另一个线程发送消息不足worker内代码不能操作DOM(更新UI)不能跨域加载JS不是所有浏览器都支持这个特性
·
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)
}
更多推荐
已为社区贡献1条内容
所有评论(0)