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)大数组处理
posted @ 2018-08-15 19:30  micwin  阅读(648)  评论(0编辑  收藏  举报