利用Web Workers优化前端性能-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54089303/article/details/121130917

把复杂业务逻辑放在分线程里面或者异步任务里面.解决代码阻塞。

1 在主线程里面创建分线程对象

2 在主线程里发送消息 w.postMessage()

3 在分线程监听onmessage事件，在时间函数通过ev.data获取数据

4 在分线程发出结果，通过postMessage()发消息给主线程

5 在主线程接收数据 w.onmessage事件，在事件函数通过ev.data获取数据

下面是一个webwork案例

HTML文件

<!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>Document</title>
    <style>
        body{
            text-align: center;
        }
        table{
            margin: 0 auto;
            border: 1px solid #000;
            border-collapse: collapse;
            margin-top: 30px;
        }
        td{
            border: 1px solid #000;
            padding: 10px 50px;
        }
        button{
            background-color: red;
            border: none;
            color: white;
            border-radius: 5px;
            padding: 10px 50px;
        }
    </style>
</head>
<body>
    <button id="b1">停止</button>
    <p>正在计算中</p>
    <table>

    </table> 


    <script src="../../../资源/jquery.js"></script>
    <script src="index.js"></script>
</body>
</html>

主线程

index.js

var i = 1//计算i值的斐波那契数值
var w = new Worker("work.js")

// 在分线程计算对应i的斐波那契数值
w.postMessage(i)
doWork()


//把分线程返回的数据返回出去给主线程
function getMessage(){
    return new Promise((resolve,reject)=>{
        let callback = function(ev){
            w.removeEventListener("message",callback)
            w.addEventListener("message",callback)
            resolve(ev)//把分线程返回的数据返回出去给主线程
        }
        w.addEventListener("message",callback)
    })
}

// ms设置显示的延迟时间 
function getTime(ms){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve(ms+"ms时间到了")
        },ms);
    })
}

function doWork(){
    // 显示时间  斐波那契数值
    var t= getTime(1000)
    var d = getMessage()
    Promise.all([t,d]).then(res=>{
        // ["1000ms时间到了",ev]
        // 渲染到页面dom
        $(`<tr>
        <td>第${i}项</td>
        <td>${res[1].data}</td>
        <td>${res[0]}</td>
        </tr>`).appendTo("table")
        i++
        w.postMessage(i)
        doWork()
    })
}
$("#b1").click(function(){
    w.terminate() //终止分线程
    $("p").text("已停止")
})

分线程

work.js

function fibo(n) {
    if (n < 1) {
        return 0
    }
    if (n <= 2) {
        return 1
    }

    return fibo(n - 1) + fibo(n - 2)
}
// 3 在分线程向主线程拿数据
// 在分线程里面监听onmessage事件，接受主线程传递的数据，在事件函数里面通过事件句柄.data可以获取传递过来的数据
onmessage = function(ev){
    // console.log(ev.data);
    var result = fibo(ev.data)
    postMessage(result)
}