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 on 2018-08-15 19:30 micwin 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/chinanetwind/articles/9483517.html

JS如何实现多线程？相关推荐

[ js ] 可否用多线程的思路，解决大数量数据的性能问题？
js中也是有线程概念的,setTimeout,setInterval和ajax都是这样的例子,另起一个线程,时间上似乎是并行处理的.于是,我想是不是可以利用这个多线程的机制,优化一下大数量数据遍历时的 ...
【worker】js中的多线程
因为下个项目中要用到一些倒计时的功能,所以就提前准备了一下,省的到时候出现一下界面不友好和一些其他的事情.正好趁着这个机会也加深一下html5中的多线程worker的用法和理解. Worker简介 J ...
如何查找历史线程阻塞原因_学习 Web Worker（js中的“多线程”）
昨天部门例会,讨论开发的系统遇到的问题,遇到一个医保上传比较耗时的问题,解决方案提到了Web Worker,学习一波. 首先简单介绍一下什么是web worker.我们都知道在浏览器中javascri ...
Node.js 中的多线程方案 Worker threads
源代码: lib/worker_threads.js node:worker_threads 模块允许使用多线程并行执行JS代码.快速引用如下: const worker = require('nod ...
js javascript 实现多线程
https://www.cnblogs.com/haodawang/p/5967269.html https://www.cnblogs.com/panmy/p/5764507.html https: ...
JS是如何实现多线程的
今天看到一道面试题,问js如何实现多线程?下面来总结一下: 因为 JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的.像setTimeout.ajax的异步请求,或者是dom元素的一 ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
[转] Node.js的线程和进程
[From] http://www.admin10000.com/document/4196.html 前言很多Node.js初学者都会有这样的疑惑,Node.js到底是单线程的还是多线程的?通过本 ...
理解Node.js的event loop
为什么80%的码农都做不了架构师?>>> 关于Node.js的第一个基本概念是I/O操作开销是巨大的: 所以,当前变成技术中最大的浪费来自于等待I/O操作的完成.有几种方法可以 ...

JS如何实现多线程？

JS如何实现多线程？相关推荐

最新文章

热门文章