js中的webworker学习

最新推荐文章于 2025-06-19 06:00:00 发布

small_sheep_boy

最新推荐文章于 2025-06-19 06:00:00 发布

阅读量765

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/small_sheep_boy/article/details/84849837

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍WebWorker API在H5中的应用，通过创建后台线程处理复杂计算，避免页面卡顿，提高用户体验。探讨WebWorker的加载机制、局限性及与DOM的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebWorker是H5中新增的API，我们使用这个API可以轻松的创建后台线程，webworker常用于执行那些耗费事件较长的逻辑计算或者大量循环，避免页面假死的发生。

webworker能为我们做什么：

1、加载一个JS文件，此文件用来进行大量计算，而不挂起主进程，通过postmessage，onmessage方法通信

2、使用importScript(url)加载其他的js文件

3、可以使用js的核心对象和部分浏览器属性

局限性：

1、不能跨域加载js 2、worker内不能访问dom，如需使用jquery，可加载jqnodom（

链接：

https://pan.baidu.com/s/1h-AC0PyM4EdXaZ68NPoCYw 提取码：0qou ）插件使用jquery调用 3、加载数据效率没有ajax高

使用：

创建线程

var worker=new Worker("test.js");
worker.postMessage("hello"); //想test.js线程发送hello
worker.onmessage=function(e){
    console.log(e.data);
}//接受子线程的数据并打印，e是事件对象。e.data是默认子线程传过来的数据

线程test.js

onmessage=function(e){
    var data=e.data;
    postMessage(data);//将主线程发过来的数据发回到主线程
}

使用起来很简单

worker+ajax配合使用：

使用情景：

1、当项目中有多个后台接口数据较大时，可以开启一个线程。

2、当需要点击某按钮后连接后台获取大量数据或开启websocket时，可以开启一个线程。

onmessage = function (event) {
              $.ajax({
				url:"http://192.168.xx.xxx/test/",
				type:"POST",
				data:yourdata,
				dataType:"text",
				success:function(data,textStatus){
					postMessage({
						type:"data",
						msg:data
					});//postMessage发送一个对象
				},
				error:function(XMLHttpRequest,textStatus,errorThrown){
					console.log("Error:"+textStatus);
				}
			});