Worker

最新推荐文章于 2021-09-30 16:26:32 发布

原创最新推荐文章于 2021-09-30 16:26:32 发布 · 245 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

worker 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了HTML5 Worker线程作为多线程性能优化方案的应用，通过将复杂运算移至后台线程处理，有效避免了JS单线程的阻塞问题，显著提升了用户体验。以斐波那契数列计算为例，展示了Worker线程与主线程的数据交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Worker

由html5 提供的多线程性能优化方案 ,可以提高用户体验
必须在服务器环境下运行

我们都知道，JS的执行环境是单线程，
单线程遇到同步操作和大量运算导致阻塞，线程卡死

worker的工作原理：将超大量级别的运算交给后台线程处理，
由后台线程将处理好的结果交给主线程

处理递归函数的案例：
index.html

let worker = new Worker('./outer.js');

worker.postMessage(45);   //传输数据
worker.onmessage = function(ev) {
       console.log(ev.data);    //接受数据
    }
let i = 0;
setInterval(function() {
       console.log(i++);
     }, 1000);

outer.js

// 后台线程需要执行的代码
function fibonacci(n) {   //斐波那契数列
    if (n <= 2) {
        return 1;
    } else {
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
}
onmessage = function(ev) {
    // 后台如何获取前端传入的内容
    let result = fibonacci(ev.data);
    postMessage(result);  //传输数据
}