深入理解 Web Worker

优质文章学习记录

— 6 min read

深入理解 Web Worker：开启多线程编程的新时代

前言

在现代 Web 应用中，随着功能的日益复杂，JavaScript 单线程的特性逐渐成为性能瓶颈。当需要执行大量计算、处理复杂任务或进行密集型操作时，主线程可能会被阻塞，导致页面卡顿甚至无响应。Web Worker 的出现为这一问题提供了完美的解决方案。

什么是 Web Worker？

Web Worker 是 HTML5 提供的一种在后台线程中运行 JavaScript 的技术。它允许开发者将耗时的任务从主线程分离出来，在独立的线程中执行，从而避免阻塞用户界面。

Web Worker 的核心特性

  1. 并行执行：Worker 在独立的线程中运行，不会阻塞主线程
  2. 消息传递：通过 postMessage 和 onmessage 进行线程间通信
  3. 同源限制：Worker 只能加载同源的脚本
  4. 独立作用域：Worker 拥有独立的 JavaScript 执行环境
  5. 无 DOM 访问：Worker 无法直接访问 DOM、window 对象等

Web Worker 的优势

  • 提升性能：充分利用多核 CPU 的计算能力
  • 改善用户体验：避免主线程阻塞，保持页面流畅
  • 代码组织：将复杂逻辑分离到独立线程，代码结构更清晰
  • 后台处理：适合处理长时间运行的任务

Web Worker 的类型

1. Dedicated Worker（专用 Worker）

专用 Worker 只能被创建它的脚本使用，一对一的关系。

2. Shared Worker（共享 Worker）

共享 Worker 可以被多个脚本共享，一对多的关系。

3. Service Worker

Service Worker 是一种特殊的 Worker，主要用于网络请求拦截和缓存管理，是 PWA 的核心技术。

基本使用方法

1. 创建 Worker 文件

// worker.js self.onmessage=function(e){const result =heavyCalculation(e.data); self.postMessage(result);};functionheavyCalculation(data){// 执行耗时计算let sum =0;for(let i =0; i < data; i++){ sum += i;}return sum;}

2. 在主线程中使用 Worker

// main.jsconst worker =newWorker('worker.js');// 发送数据给 Worker worker.postMessage(1000000);// 接收 Worker 返回的结果 worker.onmessage=function(e){ console.log('计算结果:', e.data);};// 处理 Worker 错误 worker.onerror=function(e){ console.error('Worker 错误:', e.message);};// 终止 Worker worker.terminate();

实际应用示例

示例 1：斐波那契数列计算

// fibonacci-worker.js self.onmessage=function(e){const n = e.data;const result =fibonacci(n); self.postMessage(result);};functionfibonacci(n){if(n <=1)return n;returnfibonacci(n -1)+fibonacci(n -2);}
// main.jsconst fibonacciWorker =newWorker('fibonacci-worker.js'); fibonacciWorker.onmessage=function(e){ console.log(`斐波那契数列第 ${n} 项是: ${e.data}`);};const n =40; fibonacciWorker.postMessage(n);

示例 2：图片处理

// image-processor-worker.js self.onmessage=function(e){const imageData = e.data;const processedData =processImage(imageData); self.postMessage(processedData,[processedData.data.buffer]);};functionprocessImage(imageData){const data = imageData.data;for(let i =0; i < data.length; i +=4){// 灰度化处理const avg =(data[i]+ data[i +1]+ data[i +2])/3; data[i]= avg;// R data[i +1]= avg;// G data[i +2]= avg;// B}return imageData;}
// main.jsconst imageWorker =newWorker('image-processor-worker.js');functionprocessImage(imageElement){const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d'); canvas.width = imageElement.width; canvas.height = imageElement.height; ctx.drawImage(imageElement,0,0);const imageData = ctx.getImageData(0,0, canvas.width, canvas.height); imageWorker.onmessage=function(e){ ctx.putImageData(e.data,0,0); imageElement.src = canvas.toDataURL();}; imageWorker.postMessage(imageData,[imageData.data.buffer]);}

示例 3：批量数据处理

// data-processor-worker.js self.onmessage=function(e){const{ data, operation }= e.data;const result =processData(data, operation); self.postMessage(result);};functionprocessData(data, operation){switch(operation){case'filter':return data.filter(item=> item.value >100);case'sort':return[...data].sort((a, b)=> a.value - b.value);case'aggregate':return data.reduce((acc, item)=> acc + item.value,0);default:return data;}}
// main.jsconst dataWorker =newWorker('data-processor-worker.js');functionprocessLargeDataset(data, operation){returnnewPromise((resolve)=>{ dataWorker.onmessage=function(e){resolve(e.data);}; dataWorker.postMessage({ data, operation });});}// 使用示例const largeDataset =generateLargeDataset(100000);processLargeDataset(largeDataset,'filter').then(result=> console.log('过滤结果:', result));processLargeDataset(largeDataset,'sort').then(result=> console.log('排序结果:', result));

高级应用场景

1. 实时数据分析

// analytics-worker.jslet dataBuffer =[];let analysisInterval; self.onmessage=function(e){switch(e.data.type){case'start':startAnalysis(e.data.interval);break;case'stop':stopAnalysis();break;case'data': dataBuffer.push(e.data.value);break;}};functionstartAnalysis(interval){ analysisInterval =setInterval(()=>{const analysis =analyzeData(dataBuffer); self.postMessage({type:'analysis',data: analysis }); dataBuffer =[];}, interval);}functionstopAnalysis(){clearInterval(analysisInterval);}functionanalyzeData(data){return{count: data.length,average: data.reduce((a, b)=> a + b,0)/ data.length,max: Math.max(...data),min: Math.min(...data)};}

2. WebSocket 连接管理

// websocket-worker.jslet ws;let reconnectAttempts =0;constMAX_RECONNECT_ATTEMPTS=5; self.onmessage=function(e){const{ type, url, message }= e.data;switch(type){case'connect':connect(url);break;case'send':send(message);break;case'disconnect':disconnect();break;}};functionconnect(url){ ws =newWebSocket(url); ws.onopen=function(){ reconnectAttempts =0; self.postMessage({type:'connected'});}; ws.onmessage=function(e){ self.postMessage({type:'message',data: e.data });}; ws.onclose=function(){ self.postMessage({type:'disconnected'});if(reconnectAttempts <MAX_RECONNECT_ATTEMPTS){setTimeout(()=>{ reconnectAttempts++;connect(url);},1000* reconnectAttempts);}}; ws.onerror=function(error){ self.postMessage({type:'error',error: error.message });};}functionsend(message){if(ws && ws.readyState === WebSocket.OPEN){ ws.send(message);}}functiondisconnect(){if(ws){ ws.close();}}

3. 后台文件处理

// file-processor-worker.js self.importScripts('https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js'); self.onmessage=function(e){const{ file, type }= e.data;switch(type){case'parseCSV':parseCSV(file);break;case'processJSON':processJSON(file);break;}};functionparseCSV(file){ Papa.parse(file,{worker:true,step:function(row){ self.postMessage({type:'row',data: row.data });},complete:function(){ self.postMessage({type:'complete'});},error:function(error){ self.postMessage({type:'error',error: error.message });}});}functionprocessJSON(file){const reader =newFileReader(); reader.onload=function(e){try{const data =JSON.parse(e.target.result);const processed =processData(data); self.postMessage({type:'result',data: processed });}catch(error){ self.postMessage({type:'error',error: error.message });}}; reader.readAsText(file);}

Worker 的通信机制

1. 基本消息传递

// 主线程 worker.postMessage({type:'task',data:{value:100}});// Worker self.onmessage=function(e){const{ type, data }= e.data;// 处理消息};

2. Transferable Objects

// 主线程const buffer =newArrayBuffer(1024); worker.postMessage(buffer,[buffer]);// Worker self.onmessage=function(e){const buffer = e.data;// 使用 buffer};

3. 消息通道

// 主线程const channel =newMessageChannel(); worker.postMessage({port: channel.port2 },[channel.port2]); channel.port1.onmessage=function(e){ console.log('收到消息:', e.data);};// Worker self.onmessage=function(e){const port = e.data.port; port.onmessage=function(e){ console.log('收到消息:', e.data); port.postMessage('回复消息');};};

性能优化建议

  1. 合理划分任务：将大任务拆分为小任务，避免 Worker 长时间占用资源
  2. 使用 Transferable Objects：减少数据拷贝，提高性能
  3. 及时终止 Worker：不需要时调用 terminate() 释放资源
  4. 避免频繁通信：减少主线程和 Worker 之间的消息传递次数
  5. 批量处理数据：将多个小任务合并为一个批量任务处理
  6. 使用 SharedArrayBuffer：在支持的浏览器中使用共享内存

注意事项

  1. 同源策略：Worker 只能加载同源的脚本
  2. 无 DOM 访问：Worker 无法直接操作 DOM
  3. 调试困难：Worker 的调试相对复杂
  4. 内存消耗：创建过多 Worker 会增加内存消耗
  5. 浏览器兼容性：不同浏览器对 Worker 的支持程度不同
  6. 错误处理：需要妥善处理 Worker 中的错误

总结

Web Worker 为 JavaScript 带来了真正的多线程能力，使我们能够在 Web 应用中高效地处理复杂任务和大量数据。通过合理使用 Web Worker，我们可以：

  • 显著提升应用性能
  • 改善用户体验
  • 实现更复杂的功能
  • 构建更高效的应用程序

掌握 Web Worker 的使用，将使你的前端开发技能更上一层楼，为构建高性能的 Web 应用奠定坚实基础！

参考资料

Read more

LLaMA-Factory环境配置与WebUI启动全攻略：从CUDA适配到依赖踩坑

最近在本地部署LLaMA-Factory时，踩了一连串环境配置的坑——从GitHub克隆失败、CUDA不可用到虚拟环境依赖缺失，最终成功启动WebUI。这篇文章就把完整的排错过程和解决方案整理出来，希望能帮到遇到类似问题的同学。 一、问题背景：本地部署LLaMA-Factory的核心诉求 目标是在Windows 10环境下，基于Anaconda创建虚拟环境，部署LLaMA-Factory并启动WebUI，利用本地NVIDIA MX230显卡（2GB显存）实现GPU加速。但从克隆仓库开始，就遇到了一系列报错，主要涉及三类问题： * 仓库克隆失败（GitHub连接重置、Gitee 403权限拒绝）； * PyTorch CUDA支持缺失（报“Torch not compiled with CUDA enabled”）； * 虚拟环境依赖缺失（直接运行WebUI报“ModuleNotFoundError: No module named 'torch'”）。 二、核心报错解析与分步解决方案 坑1：仓库克隆失败——网络限制与镜像选择 报错现象 从GitHub克隆时提示连
PaperRed——2026年AI论文写作、AI降重、降低aigc，免费查重的网站

PaperRed——2026年AI论文写作、AI降重、降低aigc，免费查重的网站

一、PaperRed高校合作查重系统——智能学术诚信守护者 核心科技，精准查重 依托第六代A-NLP自然语言处理技术，构建涵盖9亿篇文献的超大数据库，实现深度语义解析与精准查重，高效识别学术雷同片段，为学术成果原创性保驾护航。 全流程学术支持 * 智能查重：一键上传检测，快速定位重复内容，生成含溯源信息的详细报告； * 自动降重：AI智能改写优化，在降低重复率的同时，完整保留核心观点与表达逻辑； * AIGC辅助：支持AI生成内容的检测与针对性优化，适配学术领域新趋势与新要求； * 高效工具集：内置PPT生成、论文速成等实用功能，全方位提升学术创作效率。 高校合作优选 专为学术场景量身打造，覆盖论文、报告、课题材料等多类文件的检测需求，数据存储安全可靠，操作流程简洁便捷，已成为众多高校师生信赖的学术辅助工具。 二、PaperRed论文助手——精准查重，轻松降重 三版可选，满足全阶段学术需求 版本对比，一键甄选 专业版 * 价格：0元/字 * 数据库：涵盖14个（近5年文献资源） * 亮点：
llama.cpp：本地大模型推理的高性能 C++ 框架

llama.cpp：本地大模型推理的高性能 C++ 框架

一、基本介绍 llama.cpp是由Georgi Gerganov发起的纯C/C++开源框架，专注于在本地设备（如普通PC、树莓派、嵌入式终端）上实现低资源、高性能的大语言模型（LLM）推理。其核心目标是打破云端依赖，让开发者能在消费级硬件上本地运行Meta LLaMA、Mistral、Gemma等主流开源模型，兼顾隐私保护与推理效率。 二、核心特点 1. 极致轻量与高效 * 纯C/C++实现：无第三方依赖，对CPU架构（x86、ARM）深度优化，支持4-bit、8-bit等低精度量化（如GGUF格式），大幅降低模型体积（例如7B参数模型可压缩至4GB以内）和内存占用。 * 多硬件加速：支持多核CPU并行计算，同时兼容CUDA（NVIDIA GPU）、Metal（Apple Silicon）、Vulkan等GPU后端，提升推理速度。 2.

在Android设备上利用Termux安装llama.cpp并启动webui

llama.cpp没有发布官方aarch64的二进制，需要自己编译，好在Termux已经有编译好的包可用。 按照文章在安卓手机上用vulkan加速推理LLM的方法， 1.在Termux中安装llama-cpp软件 ~ $ apt install llama-cpp Reading package lists... Done Building dependency tree... Done Reading state information... Done E: Unable to locate package llama-cpp ~ $ apt update Get:1 https://mirrors.tuna.tsinghua.edu.cn/termux/apt/termux-main stable InRelease [14.0 kB] Get:2 https://mirrors.