JS如何实现多线程？

 

原创 2016-02-06 杜亦舒 性能与架构

单线程的问题

 

javascript是单线程执行的，在处理运算过程中，浏览器不能执行其它javascript脚本，UI渲染线程也会被挂起，从而导致浏览器进入僵死状态

 

例如执行经典的 Fibonacci(斐波拉契) 计算，这个递归运算比较耗时，我们就以此为例

 

代码

 

 

 

结果

 

fibonacci(3)

fibonacci(2)

fibonacci(1)

fibonacci(0)

fibonacci(1)

后续操作

 

可以看到，fibonacci执行完成后才能继续执行，fibonacci(3) 很快可以执行完，如果是 fibonacci(30) 就会很慢了，严重阻塞了其他代码

 

解决方法

 

如果把fibonacci计算放到另一个线程中执行，当前线程就可以继续执行，这就需要多线程的能力

 

Web Worker 是 HTML5 提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行而不冻结用户界面

 

web worker有两个好处：快速、不阻塞浏览器响应

 

对于上面的示例，可以创建一个worker线程来执行fibonacci运算

 

代码

 

 

 

worker.js

 

 

 

结果

 

开始计算1

worker执行的时候继续执行

结果1用时：779

 

开启worker线程后，就不再阻塞当前线程了，并且可以开启多个worker线程，web worker很好的解决JS单线程模型的不足

 

 

 

使用场景

 

web worker不能操作DOM，适合运算型操作

 

例如:

 

（1）长文本格式化

 

（2）语法高亮

   

（3）图片处理

 

（4）图片合成

 

（5）大数组处理