【HTML】web worker

最新推荐文章于 2024-11-23 14:54:41 发布

秀秀_heo

最新推荐文章于 2024-11-23 14:54:41 发布

阅读量606

点赞数 1

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/XiugongHao/article/details/133764088

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web Worker是HTML5中的一项技术，可以在后台运行JavaScript代码，以提高Web应用程序的性能并改善用户体验。它允许在独立的线程中执行耗时的操作，而不会阻塞主线程。

主线程是浏览器用来渲染页面、处理用户交互和执行JavaScript代码的线程。然而，在执行一些复杂的任务时，主线程可能会被占用并导致页面变得卡顿或不响应。

Web Worker通过将任务分配给后台线程来解决这个问题。后台线程是独立于主线程的，它可以同时执行多个任务（js脚本）而不会阻塞页面的渲染和用户交互。

使用Web Worker的基本步骤如下：

在主线程中创建一个Web Worker对象，并指定要执行的JavaScript文件。
在Web Worker脚本文件中编写逻辑代码，该文件将在后台线程中执行。
通过Web Worker对象与后台线程进行通信。主线程可以向后台线程发送消息，后台线程也可以向主线程发送消息。
后台线程执行完任务后，将结果发送回主线程，主线程可以捕获并处理这些结果。

实例如下：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

   </style>
</head>

<body>
   <script>
      const worker1 = new Worker('worker1.js');
      const worker2 = new Worker('worker2.js');
      const worker3 = new Worker('worker3.js');
      worker1.onmessage = e => {
         console.log(e);
      }
      worker2.onmessage = e => {
         console.log(e.data);
      }
      worker3.onmessage = e => {
         console.log(e.data);
      }
      
   </script>
</body>

</html>

// worker1.js
function fb(n) {
   if (n ==1 || n == 2) {
      return 1
   }
   return fb(n-1) + fb(n-2)
}

console.time('fb执行时间1')
const result = fb(42)
console.timeEnd('fb执行时间1')
self.postMessage('worker1')