JS实现多线程Worker
创始人
2024-06-03 08:22:54
0

js是单线程的:javascript作为脚本语言,主要与用户交互,以及Dom操作,这就决定了js只能是单线程,否则会带来很复杂的同步问题。

  1. h5提供js分线程 web workers:可以将一些计算量大的代码交由web worker运行而不冻结用户界面。
  2. Worker API

worker构造函数,加载分栈执行的js文件

worker.prototype.onmessage:用于接收另外一个线程的回调函数

worker.prototype.postMessage向另外一个函数发送消息

     3.缺点  :

但是worker代码不能直接操作dom,不能跨域加载js,不是每个浏览器都支持这个新特性,可以不阻塞主线程

使用:创建在分线程执行js文件,在主线程js中发送消息并设置回调

例子:在html页面中,让分线程计算斐波拉数列,然后返回数据



worker通过new方式创建出来,并且写入分线程的途径,这里采用相对路径,同于目录下的worker文件

worker.js文件  

var onmessage = function(event){// event.data就是接受的数据// 不能函数声明var number = event.data;console.log('分线程接收到主线程的数据'+number);// 计算var result = fibonacci(number);postMessage(result);console.log("分线程向主线程传递数据");console.log(this);// 全局对象就不是window了// 并且此页面根本就不可访问window对象// 分线程中的全局对象不再是window,所以在分线程中不可能再更新界面
function fibonacci(n){return n<=2 ? 1:fibonacci(n-1)+fibonacci(n-2);// 递归调用函数内部调用自己
} 
}

worker文件返回数据的时候也采用postMessage的方法,但是在这个this并不是在html中window对象,所以操作不了界面。

这样因为计算结果可能比较久,因为js单线程,所以此时前端页面交互阻塞,如果交给worker去处理,虽然数据返回结果较慢,但是用户可以继续操作界面。

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...