【网页特性】Web Workers加速耗时计算

Web Workers

我们知道，js是单线程运行的，这个特点可能会造成当某个操作特别耗时的时候，页面出现崩溃或无响应的状态。

Web Workers 能够赋予js多线程的能力，实质上是开启一个Web Workers线程，用于处理这些耗时的计算。

下面，通过一个示例说明——计算斐波那契数列：

知识：斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233，377，610，987，1597，2584，4181，6765，10946，17711，28657，46368…这个数列从第3项开始，每一项都等于前两项之和。
在数学上，斐波纳契数列以如下被以递推的方法定义：
F(1)=1，F(2)=1, F(n)=F(n-1)+F(n-2)（n>=3，n∈N*）

下面，我们通过Web Workers 计算它。
我们将线程分为UI线程和Web Workers线程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web workers</title>
</head>
<body>
    <div class="calc">
        <input type="text" id="text" />
        <input type="button" value="获取结果" id="btnCal"/>

    </div>
    <p>结果:</p>
    <p class="result" id="result"></p>
    <script>
    //UI 线程，用以处理DOM操作
        var input = document.getElementById("text"),
            cal = document.getElementById("btnCal"),
            result = document.getElementById("result");
        var getResult = function(){
            var initVal = input.value;
            var w = new Worker("./worker.js"); //创建web worker线程
            w.postMessage(initVal); //向web worker 发送消息
            w.addEventListener("message",function(event){ //接收Web workers 线程传回的消息
                result.innerHTML = result.innerHTML + initVal + "斐波那契数列："+event.data ;
            },false)
        }
        cal.addEventListener("click",getResult,false);
    </script>
</body>
</html>

web workers线程 worker.js

//web workers线程 ,用以处理耗时计算操作
function fibonacci(n){
    return n<2 ? n : fibonacci(n-1) + fibonacci(n-2);
}
this.addEventListener("message",function(event){ //接收UI线程传递过来的消息
    var resultVal = fibonacci(event.data);//计算对应的值
    this.postMessage(resultVal);   //将计算结果发送给UI线程
})

【网页特性】Web Workers加速耗时计算 | 更新中...

Web Workers

猜你喜欢