Html关于worker的使用

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

在一个html文件内

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 Example</title>
</head>
<body>
  <div id="output">123</div>
  <button onclick="startCalculation()">Start Calculation</button>

  <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>

分开html和js文件

html文件代码

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 Example</title>
</head>

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

  <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>

worker.js代码

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)
  }
}
相关推荐
掘金安东尼17 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~19 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务22 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛22 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑25 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭31 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿36 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js