js是单线程,里面有逻辑计算,也有DOM操作,这样就会导致一些不易察觉的小问题。如果处理比较复杂的逻辑问题的时候,页面可能无响应;在做倒计时的时候,可能由于DOM事件的操作,导致定时越来越慢;如果页面最小化,那么主线程上的js可能不会被执行等。。。

worker和内联worker gif worker和内联worker

上面就是一个用worker和非worker做的一个简单的计时器功能,我们可以发现,在最小化浏览器后,主线程上的计时器明显落后worker线程上的计时器,因为浏览器最小后,主线程就没有执行了,但是worker依然执行,因此,在某些场合使用worker还是不错的。

worker

worker使用起来比较简单,就是新建一个js,例如a.js,然后在里面写逻辑代码,然后在主线程中使用new Worker('a.js'),主线程和worker线程通过postMessage和onmessage来交互。

background Layer 1 主线程 worker1 worker2

worker虽然好,但是worker有个很明显不好的地方,就是每次都要新建一个js来和主线程交互,这个还是比较麻烦的,最好的是能够将worker的代码和主线程的代码写在一起,这样就比较简单。

内联worker

Worker其实除了new Worker('a.js')这种初始化方法外,还有另外一种初始化方法,new Worker([blob]),我们可以利用这种方法来做内联worker。关键生成代码如下:

原理其实也很简答,就是将要放入worker中的代码转成blob,然后初始化Worker,这样就和正常使用worker一样了,下面的demo就是利用内联worker实现的。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字