javascript多线程操作,附带子线程超时检测机制

最新推荐文章于 2024-12-31 15:54:26 发布

「已注销」

最新推荐文章于 2024-12-31 15:54:26 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

文章标签： javascript web work 超时检测

本文链接：https://blog.youkuaiyun.com/weixin_42135519/article/details/99007956

本文介绍如何使用WebWorker技术解决前端视频码流请求耗时问题，通过将计算任务分配到子线程，避免阻塞主线程，实现前端性能优化。示例展示了主线程与子线程间的通信机制，用于计算斐波那契数列。

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

最近所做的项目需要完成请求视频码流耗时的操作,而老板不希望用户操作时转圈等待,于是需要提高性能,传统JS开发中都是基于单线程进行执行的,项目计划引入Web Worker技术

例子是用于计算斐波那契数列（Fibonacci sequence）主线程进行渲染和管理,子线程进行计算

不多说,直接上代码

主线程:main.js

$(function () {
  const o = new Worker('js/a.js'); //创建
  let result;
  o.postMessage(50);//要求子线程计算第50位的斐波那契数
  console.log('其他主线程操作');
  setTimeout(function () {
    if (!result) {
      console.log('计算超时')
      o.terminate();
    }
  }, 1500)//1.5秒后检测子线程有没有计算完成
  o.onmessage = function (e) {
    result = e.data;// 运行成功返回的数据
    console.log('结算结果是' + e.data)
  }
});

子线程:js/a.js

代码很简单,不多解释了

self.onmessage = (ev) => {
  // 对数据进行复杂运算
  self.postMessage(fib(ev.data))
}

function fib(n) {
  if (n === 1 || n === 2) {
    return 1
  }
  return fib(n - 1) + fib(n - 2);
}

运行结果

计算第50位斐波那契数原谅我这坑爹的电脑