HTML5的web工作线程

喵喵的柠檬汁

已于 2024-04-17 23:03:08 修改

阅读量456

点赞数 9

文章标签： html5 javascript

于 2024-04-17 22:31:35 首次发布

本文链接：https://blog.csdn.net/m0_60908355/article/details/137890326

版权

一.前言

之前在学习旧物《Head First HTML5 Programming 》的时候接触到了关于web工作线程的内容，说实话就是在JavaScript中引入了多线程，一般来说javascript就是默认是单线程运行的，为的是避免用户因单线程JavaScript长时间处理某一件时间而导致用户体验网页响应感受差，而专门设置一个工作线程来处理需要大量时间和资源处理的响应，正常情况下，简单的功能JavaScript并不会占用过多的时间和资源，如果网页出现了响应迟缓等问题，应该先考虑是否是代码结构的问题，而不是考虑引入多线程的功能。

二.应用场景

随着 Web 应用程序变得越来越复杂，有时候某些任务可能会消耗大量的时间，导致页面变得迟缓或不响应。在这种情况下，引入 Web Workers 可以帮助将这些耗时任务移到后台线程中运行，从而不影响主线程的执行，提高了页面的响应速度和用户体验。

此处借用的书里的插图，很形象的说明使用多线程的情景，在这种情况下我们应该把长时间运行且不参与网页交互的作业新建线程放入后台运行。

可通过下列代码判断浏览器是否支持web工作线程：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Worker Support Check</title>
</head>
<body>
<div id="status">Checking Web Worker support...</div>

<script>
window.onload = function() {
    if (window["Worker"]) {
        var status = document.getElementById("status");
        status.innerHTML = "Great! Your browser supports Web Workers.";
    } else {
        var status = document.getElementById("status");
        status.innerHTML = "Bummer, your browser does not support Web Workers.";
    }
}
</script>
</body>
</html>

下列是一个简单的例子，它同时计算斐波那契数列并实时更新当前时间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Workers 示例：实时时间与斐波那契数列计算</title>
</head>
<body>
  <h1>Web Workers 示例</h1>
  <p>点击按钮开始计算斐波那契数列，并实时查看当前时间。</p>
  <button onclick="startFibonacciCalculation()">开始计算斐波那契数列</button>
  <p>当前时间: <span id="currentTime"></span></p>
  <p>斐波那契数列: <span id="fibonacciNumbers"></span></p>

  <script>
    // 声明全局变量
    var worker; // Web Worker 实例
    var fibonacciNumbers = []; // 存储计算得到的斐波那契数列
    var isCalculating = false; // 标记是否正在进行计算
    var currentTimeElement = document.getElementById('currentTime'); // 显示当前时间的元素
    var fibonacciElement = document.getElementById('fibonacciNumbers'); // 显示斐波那契数列的元素

    // 创建 Web Worker
    function createWorker() {
      if (typeof(Worker) !== "undefined") {
        // Web Worker 脚本
        var workerScript = `
          self.onmessage = function(event) {
            var n = event.data;
            var fibonacci = function(n) {
              if (n <= 1) return n;
              return fibonacci(n - 1) + fibonacci(n - 2);
            };
            var result = fibonacci(n);
            postMessage(result);
          };
        `;

        // 创建 Blob 对象，用于存储脚本
        var blob = new Blob([workerScript], { type: 'application/javascript' });
        // 创建 Web Worker 实例
        return new Worker(URL.createObjectURL(blob));
      }
    }

    // 开始计算斐波那契数列
    function startFibonacciCalculation() {
      if (isCalculating) {
        return;
      }
      isCalculating = true;
      worker = createWorker();

      // 接收 Worker 发来的斐波那契数
      worker.onmessage = function(event) {
        // 将计算得到的斐波那契数添加到数组中，并更新显示
        fibonacciNumbers.push(event.data);
        fibonacciElement.textContent = fibonacciNumbers.join(', ');
        // 每秒计算下一个斐波那契数
        if (fibonacciNumbers.length < 50) { // 假设我们只计算前50个斐波那契数
          setTimeout(function() {
            worker.postMessage(fibonacciNumbers.length);
          }, 1000);
        } else {
          isCalculating = false;
          alert('斐波那契数列计算完毕！');
        }
      };

      // 发送第一个斐波那契数的计算请求（第0个）
      worker.postMessage(0);
    }

    // 更新当前时间
    function updateCurrentTime() {
      // 更新当前时间并显示
      currentTimeElement.textContent = new Date().toLocaleTimeString();
      // 每秒更新一次时间
      setTimeout(updateCurrentTime, 1000);
    }

    // 启动时间更新
    updateCurrentTime();
  </script>
</body>
</html>

注意，在上述代码中，我为了避免从文件中直接运行web工作线程（Chrome会报错），将js写入html（分开需要通过服务器访问或建立虚拟环境），大家也可以通过CodePen、JSFiddle在线测试。CodePen，JSFiddle。

那种网页弹窗实时聊天也可以通过提供web多线程实现

三.应注意的点

创建的工作线程杀死了就是真的die了，而工作线程创建的数量一般于运行环境中的机器有关，高性能的要求下，工作线程一般等同机器核的数量有关，postMessage和onMessage，这里分别附上一些简单的运用案例以及一篇他人写的关于web工作线程更为详细的博客。

处理工作线程中的错误

worker.onerror = function(error){
    document.getElementById("output").innerHTML =
    "There was an error in " + error.filename + 
    " at line number " + error.lineno + 
    ": " = error.message;
}

大佬的https://blog.csdn.net/qq_39335404/article/details/132710636

这是我第一次写贴，这算个心得贴，也算不了什么技术贴，有什么不足以及错误的地方希望各位看官多多体谅。

喵喵的柠檬汁

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
HTML5的web工作线程

之前在学习旧物《》的时候接触到了关于web工作线程的内容，说实话就是在JavaScript中引入了多线程，一般来说javascript就是默认是单线程运行的，为的是避免用户因单线程JavaScript长时间处理某一件时间而导致用户体验网页响应感受差，而专门设置一个工作线程来处理需要大量时间和资源处理的响应，正常情况下，简单的功能JavaScript并不会占用过多的时间和资源，如果网页出现了响应迟缓等问题，应该先考虑是否是代码结构的问题，而不是考虑引入多线程的功能。
复制链接

扫一扫