博客

如何在React中使用WebWork

  • Post author:
  • Post category:其他


在单页应用中使用WebWork

JS为了避免DOM渲染冲突，使用单线程运行代码。虽然浏览器通过事件循环队列延后处理耗时任务，但是在执行大量复杂运算时依然会使主线程卡顿，HTML5提出了WebWork允许用户另开线程来进行复杂的逻辑计算处理。

WebWork在html中使用方法：
1. 在index.Html中新建worker对象，并发送及监听消息

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>WebWork</title>
    </head>
    <body> </body>
    <script>
        var work = new Worker('./work.js')
        work.postMessage(1000000000)
        work.onmessage = function(res){
            console.log("累加结果 : ",res.data)
        }
    </script>
    </html>


2. 新建work.js处理复杂逻辑

    onmessage = function(e){

        let sum = 0,num = e.data;
        for(var i=1;i<=num;i++){
            sum += i