关于webworker的使用webwork的用法是开辟一个线程，让这个线程帮助你进行复杂的运算，这个的好处就是不会阻塞页

webwork的用法是开辟一个线程，让这个线程帮助你进行复杂的运算，这个的好处就是不会阻塞页面，当你要进行复杂的算法运算，webworker可以帮助到你。下面举个例子吧,html文件要放在同个目录下，同时启动http-server静态服务器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="number">
    <button>获取webworker的内容数据</button>
    <div class="result"></div>
    <script>
        
        let result = document.querySelector(".result");
        let btn = document.querySelector("button");
        let input = document.querySelector("input");
        let worker = new Worker("./webWork.js")
        // 发送消息到worker
        const resultData = (event) => {
            result.innerHTML = event.data;// 接收worker返回的数据
        }

        // 页面初始化的时候就监听woker
        worker.addEventListener("message", resultData);

        btn.addEventListener("click", function () {
            // 用户操作的时候就开始发送消息
            worker.postMessage(input.value);
        })

    </script>
</body>

</html>

function qie(num){
    let arr = [1,1] // 初始化数组，用来缓存计算结果，优化性能
    for(let i = 2; i <= num; i++){
        arr[i] = arr[i-1] + arr[i-2]
    }
    return arr[num];
}
// 开辟一个worker线程，用来计算斐波那契数列
self.addEventListener('message', function(e) {
    let num = e.data; // 获取主线程传来的数据
    let result = qie(num); // 计算结果
    self.postMessage(result); // 将结果发送回主线程
});