JavaScript 模拟多线程

清疚 2022-05-20 02:04 215阅读 0赞

## 概念 ##

### 多线程 ###

百度百科上说：多线程（英语：multithreading），是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。具有这种能力的系统包括对称多处理机、多核心处理器以及芯片级多处理（Chip-level multithreading）或同时多线程（Simultaneous multithreading）处理器。  
在一个程序中，这些独立运行的程序片段叫作“线程”（Thread），利用它编程的概念就叫作“多线程处理（Multithreading）”。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。

### 浏览器内核是多线程的 ###

浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程：JavaScript引擎线程，GUI渲染线程，浏览器事件触发线程。

*  JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。
 *  GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时，该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。
 *  事件触发线程，当一个事件被触发时，该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系，所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。

### JavaScript是单线程执行的 ###

JavaScript是单线程执行的。也就是说，在任何时间点，有且只有一个线程在运行JavaScript程序，无法同一时候运行多段代码。

### 实现 ###

参考  
[《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork][3.6_JavaScript_Concurrent.Thread.js_ WebWork]  
[JavaScript多线程初步学习][JavaScript]

#### 实现一：用setTimeout制造异步执行的假象 ####

setTimeout只能保证在指定的时间后将任务(需要执行的函数)插入任务队列中等候，但是不保证这个任务在什么时候执行。一旦执行javascript的线程空闲出来，自行从队列中取出任务然后执行它。

setTimeout 参数

1.  要执行的回调函数
2.  延迟时间（如果省略，会由浏览器自动设置。在IE，FireFox中，第一次配可能给个很大的数字，100ms上下，往后会缩小到最小时间间隔，Safari，chrome，opera则多为10ms上下）
3.  第3、第4等，用来表示第一个参数（回调函数）传入的参数

setTimeout(fn, 0) 可以改变任务的执行顺序。因为浏览器会在执行完当前任务队列中的任务，再执行setTimeout队列中积累的的任务。当我们写为 setTimeout(fn,0) 的时候，实际是实现插队操作，要求浏览器“尽可能快”的进行回调，但是实际能多快就完全取决于浏览器了。

##### 验证 #####

var start = new Date();  
    var end = 0;  
    setTimeout(function() {    
      console.log(new Date() - start); // 输出时间>500ms 
    },  500);  
    
    while (new Date() - start <= 1000) {}

虽然setTimeout的延时时间是500毫秒，可是由于while循环的存在，只有当间隔时间大于1000毫秒时，才会跳出while循环，也就是说，在1000毫秒之前，while循环都在占据着JavaScript线程。也就是说，只有等待跳出while后，线程才会空闲下来，才会去执行之前定义的setTimeout。

##### 使用 #####

setTimeout(function(){ 
     // statement
    },0);

本意是立刻执行调用函数，但事实上，上面的代码并不是立即执行的，这是因为setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的延迟时间设置为0，被调用的程序也没有马上启动。

不同的浏览器实际情况不同，IE8和更早的IE的时间精确度是15.6ms。不过，随着HTML5的出现，在高级版本的浏览器（Chrome、ie9+等），定义的最小时间间隔是不得低于4毫秒，如果低于这个值，就会自动增加，并且在2010年及之后发布的浏览器中采取一致。

#### 实现二：Concurrent.Thread.js ####

[开发教程][Link 1]  
Concurrent.Thread.js是一个日本人开发的，用来让javascript也进行多线程开发的包，可以让我们将耗时的任务利用前端来模拟多线程。

#### 实现三：WebWork ####

WebWork 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

注意：dom是不能被异步操作的! WebWork不能在本地使用

HTML5之WebWork使用方法：[http://www.cnblogs.com/yxlblogs/p/3896786.html][http_www.cnblogs.com_yxlblogs_p_3896786.html]

[3.6_JavaScript_Concurrent.Thread.js_ WebWork]: https://www.cnblogs.com/woodk/articles/5199536.html
[JavaScript]: https://www.cnblogs.com/fanfan-nancy/p/5722234.html
[Link 1]: http://www.cnblogs.com/0banana0/archive/2011/06/01/2067402.html
[http_www.cnblogs.com_yxlblogs_p_3896786.html]: http://www.cnblogs.com/yxlblogs/p/3896786.html