JS如何实现多线程?
单线程的问题
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)大数组处理
Leave a Comment