HTML5学习——worker对象

时间:2021-10-24 19:36:47

我的碎碎念,以前吧,觉得前端这玩意儿很复杂,有好多东西要学。后来学了一段时间之后发现不过如此,就是用html+css写写页面,然后为了使页面有动态的数据,就加了ajax和js。

然后不知道为什么前端越来越复杂。nodejs的出现之后,很多工具的出现,webpack、browserify…现在我用的是webpack。
之前觉得,天啊,这是要命啊,本来js就基础不扎实,又要整这些东西,然后后来发现,其实这些工具只是为了让你的工作更简单,如果你觉得它是一个负担,那一定是没有学会怎么用。
就比如说,我想用es6的语法写js,如果你用传统的script标签引入,就会很麻烦,需要用加载什么bower,如果你用工具化的,在自己的电脑上编译一下,你的es6化的js就可以被浏览器识别了。更别说那些脚手架,真的是好用得没话说。npm vue-cli react-cli….就自动为你建好了工程目录。

呃,好像聊偏题了。
现在回到正题,最近在看《javacript异步编程》,里面讲了如何用事件异步,node端的异步,jquery的promise对象等等(node也有promise对象)。
然后又看到了worker。

众所周知,javascript和java不一样,没有多线程这个概念,cpu一个时间只能做同一件事情。而我们做的只能是异步,就是尽可能的让cpu利用率大,就是当cpu需要等待一个io耗时长的事件的时候,这个事件就暂停,先让别的事件先走。
异步事件处理其实就很能理解:
在一条高速公路上,只有一条道,也就是说只能过一辆车。如果某一辆车中途需要加油,如果它直接停下来在原地加油,那么后面的车子不就过不了嘛,(估计喇叭要按爆了)就是阻塞了。如果这样,效率是不是太低,异步非阻塞的思想就是,这辆装货的车先到旁边的服务站去加油,让后面的先通行,等你加满了油,再等待交警调度(这里还需要一个调度,不是你想回就回的),决定你什么时候回到正规上来继续运行,这就是异步非阻塞。

其实worker也是这样的机制,我觉得。
worker就是上面打比方的“服务站“,然后有主线程。
一个worker对象的创建很简单

  //创建一个worker对象
var worker = new Worker('worker.js');
//监听worker对象
worker.addEventListener('message', function(e) {
console.log('main')
console.log(e.data)
})

worker对象的创建

worker.js

self.addEventListener('message', function(e) {
console.log('worker')
self.postMessage('Be knows' + e.data);
})

主程序发送消息

worker.postMessage('football')
worker.postMessage('baseball')

HTML5学习——worker对象
worker对象会把自己的计算结果发给主线程(通过postMessage),由主线程去更新页面。
worker对象看不到window对象和主线程及其他worker线程中的任何对象;
worker只能看到自己的全局对象self,以及self已绑定的东西:标准的Javascript对象(如setTimeout和Math),以及浏览器的ajax方法

Node版本的worker实例

node和html的worker看起来好像差不多,都是主进程分多线程去处理。

/*Node版本worker实例*/
var cluster = require('cluster');
module.exports = function worker() {
if (cluster.isMaster) {
var coreCount = require('os').cpus().length;
for (var i = 0; i < coreCount; i++) {
cluster.fork();
}
//绑定death事件
cluster.on('death', function(worker) {
console.log('Worker' + worker.pid + 'has died');
})
} else {
process.exit();
}
}

解释一下上面的语言

var coreCount = require('os').cpus().length;

是获取操作系统的cpu内核,上面的代码是首先检测操作系统有几块内核,然后为每一片内核绑定一个进程,node的绑定是通过cluster.fork,html5是通过worker.addEventListener(),这里有一点不一样。
因为我的电脑有6核,因此就能看到这里有6个线程在运行。
HTML5学习——worker对象
因此这里我想想,我们就可以拿这个多线程做很多事情了。