html5 worker的使用场景

worker可以让js有多线程一样的特性,什么地方该用呢?写了个例子:http://jsfiddle.net/walker/9angN/(请使用最新版的谷歌或火狐进行测试)。

同样一个50亿次的空循环,一个用了worker,一个是普通写法。跑起来明显的区别,worker在后台的时候,整个浏览器是可以响应的,并且页面上的计数器也能非常流畅地跳动;而普通写法是比较考验浏览器的,不那么强悍的浏览器就直接无响应了,并且计数器根本就不工作。

结果已经比较明显了,显然worker非常适合后台要做大量运算的耗时长的工作,这样会大大减少浏览器不响应的情况。不适合的地方在哪?

我们的主线程和worker是通过postMessage来通信的,监听一个message事件。而postMessage是相当消耗资源的,看这个例子,http://jsfiddle.net/walker/9angN/7/,如果每个循环里都postMessage的话(我已经把循环次数从10亿减到50万),但是响应时间还是远远超出了仅post一次的时间(如果接到message还要操作DOM或者要记录到console,那时间更是显著增加)。这还不是重点,关键是postMessage会造成页面不响应。注意,这里请结合第一个示例进行测试。

第一个例子,虽然worker在后台工作,但是页面是可以响应的,比如对页面文字进行选择操作。但是第二个例子中,50万次循环没进行完前,你的浏览器可以响应,但是页面已经不响应了,你也选择不了页面任何元素。如果这个页面是嵌套在iframe中的,那么主页面也会被锁住。

所以worker适合后台来做运算,但是不要频繁跟调用者通信,这样得不偿失。

你可能感兴趣的:(worker)