js多线程

最新推荐文章于 2025-03-24 14:06:11 发布

别叫我->学废了->lol在线等

最新推荐文章于 2025-03-24 14:06:11 发布

阅读量512

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_36971442/article/details/125940536

版权

js 专栏收录该内容

9 篇文章

订阅专栏

js多线程

js是单线程模型，webwork 就是为js创造多线程环境 相当于java的thread。

Work线程

多线程 做一些耗时的操作可以考虑
// 发送通知
self.postMessage('worker'+result)

主线程

    var worker = new Worker('work.js')
    // 接收通知
    worker.onmessage = e => {
      console.log(e.data)
    }

优势与劣势
使用场景：1.解决页面卡死问题。
         2.发挥多核CPU的优势，提高js性能。
 劣势：
         1.兼容问题
 Browser	IE	Edge	FireFox	Chrome	Safari
 version	10+	12+	3.5+	4+	4+
         2.同源限制
         3.不能操作dom 获取 navigator、 location(只读)、XMLHttpRequest、  setTimeout族等浏览器。
         4.脚本限制 worker线程不能执行 alert、 confirm，但可以使用 XMLHttpRequest 对象发出ajax请求。(不推荐耗性能)

实例-主线程

<!--
 * @Description: 
 * @Author: 李思甜
 * @Date: 2022-07-22 19:44:21
 * @LastEditTime: 2022-07-22 21:31:50
 * @LastEditors: 李思甜
-->
<!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>
</head>

<body>
  <script>
    // var worker = new Worker('workthread.js')
    // worker.onmessage = e => {
    //   console.log(e)
    // }


    if (window.Worker) {
      // 1.创建一个work线程
      const myWorker = new Worker('workthread.js')
      // 2.向worker线程发送数据 可以是file blob
      myWorker.postMessage(10)
      //3.监听后台任务，
      myWorker.onmessage = function (e) {
        console.log('Message received from worker')
        console.log("分线程返回的值", e.data)
      }
      //4.当离开页面的时候，或者需要结束worker时(比如任务完成时)，
      //可以结束Worker线程，不必占用资源       
      // myWorker.terminate()


      //5.当myWorker异常时的时候，会触发onerror事件    
      myWorker.onerror = function () {
        console.log('程序做异常处理')
      }
    } else {
      console.log("你的浏览器不支持多线程")
    }

  </script>
</body>

</html>

实例-分线程

/*
 * @Description: 
 * @Author: 李思甜
 * @Date: 2022-07-22 20:00:23
 * @LastEditTime: 2022-07-22 21:30:59
 * @LastEditors: 李思甜
 */
// self.postMessage('asdsdad')



console.dir(self)

onmessage = function (e) {
  console.log('接收到主线程任务', e.data)
  let num = e.data
  // 做一些耗时间的操作，月卡越好
  function fn (n) {
    if (n == 1 || n == 2) {
      return 1
    }
    return fn(n - 1) + fn(n - 2)
  }
  var res = fn(num)
  console.log('res', res)
  postMessage(res)
  self.close()
  console.log('关闭')
}
// self.close()
onerror = function (err) {
  console.warn(err)
}