Html关于worker的使用

在这里的案例是我使用worker进行UI界面的改变
众所周知,如果在JS代码在进行运算中去改变页面的UI显示的数据,只能等到JS代码计算完毕后才能进行更换UI界面,然而worker就是处理这种的,例如下面的demo,当我点击按钮会在js计算的过程中页面输出一个456,这里我判断的是索引为10的时候去改变UI,代表确实是在JS进程中了,当计算完毕后在控制台打印结果,正常情况下只能等结果打印出的瞬间才能更改UI数据,这里就能在不等计算结束直接渲染UI,好了,话不多说,直接看下面demo,运行demo即可

在一个html文件内

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Worker Exampletitle>
head>
<body>
  <div id="output">123div>
  <button onclick="startCalculation()">Start Calculationbutton>

  <script>
    // 定义一个函数，用于启动计算
    function startCalculation() {
      // 创建一个新的 Worker 对象
      const worker = new Worker(URL.createObjectURL(new Blob([`(${workerCode.toString()})()`], {type: 'application/javascript'})));

      // 监听来自 Worker 的消息
      worker.onmessage = function(event) {
        // 当收到消息时，更新页面输出
        document.getElementById('output').innerText = event.data;
      };

      // 向 Worker 发送消息，开始计算
      worker.postMessage('start');
    }

    // 定义 Web Worker 内部的计算函数
    function workerCode() {
      // 监听来自主线程的消息
      onmessage = function(event) {
        if (event.data === 'start') {
          // 开始复杂的计算逻辑
          console.log('Starting complex calculation...')
          let result = 0
          for (let i = 0; i < 1000000000; i++) {
            if (i === 10) {
              // 当满足条件时，发送消息到主线程
              postMessage('456');
            }
            result += Math.sqrt(i)
          }
          console.log('Complex calculation result:', result)
        }
      };
    }
  script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

分开html和js文件

html文件代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Render and Continue Calculation Exampletitle>
head>

<body>
  <div id="output">123div>
  <button onclick="startCalculation()">Start Calculationbutton>

  <script>
    function startCalculation() {
      // 创建一个新的Web Worker
      const worker = new Worker('worker.js'); // 这里是引用的js路径

      // 接收来自Web Worker的消息
      worker.onmessage = function (e) {
        document.getElementById('output').innerText = e.data;
      };

      // 向Web Worker发送消息
      worker.postMessage('start');
    }
  script>
body>

html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

worker.js代码

// worker.js

// 监听来自主线程的消息
onmessage = function (e) {
  if (e.data === 'start') {
    console.log('Starting complex calculation...')
    let result = 0
    for (let i = 0; i < 1000000000; i++) {
      if (i === 10) {
        // 发送计算结果到主线程
        postMessage('456')
      }
      result += Math.sqrt(i)
    }
    console.log('Complex calculation result:', result)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

相关阅读:
Nginx —— Win下搭建http-flv服务，使用FFmpeg/Tomcat对http推拉流
MobaXterm工具软件使用介绍
Session会话追踪的实现机制
【Python脚本进阶】1.2、python脚本基础知识（上）
目标检测YOLO实战应用案例100讲-基于YOLOv5的目标检测与6D位姿估计算法研究(下)
JavaScript仿照移动端APP百度地图制作H5的滑动面板
ovs dpdk debug
JavaCV音视频开发宝典：UDP广播推流使用UDP方式推送广播TS流实现UDP一对多广播
【人民币识别】人民币序列号识别【含GUI Matlab源码 908期】
【电子学会】2023年05月图形化三级 -- 数星星

原文地址：https://blog.csdn.net/weixin_68658847/article/details/136486598