创建一个worker 对象并向它传递将在新线程中执行的脚本的URl
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>递归</title></head><body><input type="text" id="number"><button id="btn">计算</button><script>let input = document.getElementById('number')document.getElementById('btn').onclick = function (){let number = input.value// 创建一个worker 对象并向它传递将在新线程中执行的脚本的URllet worker = new Worker('./worker.js')// 接收worker 传过来的数据函数worker.onmessage = function (event) {console.log('主线程接收分线程返回的数据', event.data)alert(event.data)}// 向分线程发送信息worker.postMessage(number)console.log('主线程向分线程发送数据请求' + number)}</script></body></html>
新线程
function countNum(n) {return n <= 2 ? 1 : countNum(n - 1) + countNum(n - 2) //----->递归调用}// 只能用函数表达式var onmessage = function (event){var number = event.data// 通过event.data获得发送来的数据var result = countNum(number)// 返回数据给主线程postMessage(result)console.log('分线程返回数据给主线程' + result)}
Workers 是html5提供的一个JavaScript多线程解决方案
我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面
但是主线程完全受主线程控制，且不得操作DOM。
所以，这个新标准并没有改变JavaScript单线程的本质
Worker：构造函数，加载分线程执行的js文件
Worker.prototype.onmessage:用于接收另外一个线程的回调函数
Worker.prototype.postMessage:向另一个现场发送消息
不足
worker内代码不能操作DOM(更新UI)
不能跨域加载JS
不是每个浏览器都支持这个新特性
