Web Workers多线程处理

最新推荐文章于 2024-04-28 07:15:00 发布

星空下的嗳

最新推荐文章于 2024-04-28 07:15:00 发布

阅读量529

点赞数 1

本文链接：https://blog.csdn.net/qq_35718410/article/details/52213006

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天给大家简单介绍一下，如何利用HTML5的Web Workers进行多线程处理。

Web Workers 为网页脚本提供了一种能在后台进程中运行的方法。我们创建好Workers之后，就可以通过postMessage方法向任务池发送任务请求，该任务执行完之后，再通过postMessage返回消息给创建者指定的事件处理程序，然后通过onmessage捕获到返回的消息。

通过Web Workers，我们可以提高网页性能，将一些复杂、耗时的计算及任务通过多线程交给后台来处理，这样有点像异步交互的感觉，你在后台处理你的，我接着做我的，互不影响。否则遇到复杂的计算，前端的网页性能就会下降，给用户带来不好的体验。

首先我们先判断一下浏览器是否支持Worker,代码如下：

if(Worker){
   console.log("该浏览器支持Worker");
}else{
   console.log("该浏览器不支持Worker");
}

接下来我们来看一下Worker的API

1、创建Worker

var worker = new Worker(worker文件路径);

文件路径写处理该多线程逻辑的文件路径，但是最好不要写如下这样的本地路径：

file:///E:/%E9%87%91%E4%BA%91%E9%BE%99/03_HTML5/DAY07/PROJECT/worker1.js

原因在于Chrome等主流浏览器不允许读取本地路径

2、与Web Worker的通信

onmessage事件

作用 - 用于监听Worker文件的执行情况

postMessage(data)方法
作用 - 用于传递消息（数据或结果）

终止与Web Worker的通信

terminate()方法

下面我们来看一个简单的Web Worker示例，我们创建一个计数逻辑

<!DOCTYPE html>
<html>
 <head>
  <title>WebWorker的基本使用</title>
  <meta charset="utf-8" />
 </head>
 <body>
   <input type="button" id="start" value="开始计数">
   <input type="button" id="stop" value="停止计数">
   <div id="show"></div>
   <script>
      var start = document.getElementById("start");
      var stop = document.getElementById("stop");
      var show = document.getElementById("show");
      var worker;
      start.onclick = function(){
         // 开始计数 - 与Worker进行通信
         // a. 检测当前浏览器是否支持Worker
         if( typeof(Worker) !== "undefined" ){
            /*
                b. 创建Worker对象
                  错误 - Script at 'file:///E:/%E9%87%91%E4%BA%91%E9%BE%99/03_HTML5/DAY07/PROJECT/worker1.js' cannot be accessed from origin 'null'.
                  原因 - Chrome等主流浏览器不允许读取本地文件
               */
            worker = new Worker("worker1.js");
            // b. 利用onmessage事件 - 监听Worker文件
            worker.onmessage = function(event){
               // 得到postMessage()方法传递的消息
               var data = event.data;
               show.innerHTML = data;
            }
         }
      }
      stop.onclick = function(){
         // 结束计数 - 终止与Web Worker的通信
         worker.terminate();
      }
   </script>
 </body>
</html>

我们把复杂的技术逻辑放在worker1.js中，代码如下：

var num=0;
function startNum(){
   postMessage(num);
   num++;
   setTimeout(startNum,1000);
}
startNum();

这样我们就实现了一个计数器的逻辑，其中计算的逻辑放在了worker1.js中，通过Web Worker与其进行通信，并将计算后的结果返回给我们的主程序中。在我们自己的项目中，完全可以将耗时的逻辑通过Web Worker来进行处理，这样可以提升我们Web页面的性能。

星空下的嗳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Workers多线程处理

今天给大家简单介绍一下，如何利用HTML5的Web Workers进行多线程处理。
复制链接

扫一扫

专栏目录