JavaScript事件循环机制

• 一、线程和进程
  • 1、单线程和多线程
  • 2、GUI渲染线程
  • 3、JS引擎线程
  • 4、同步任务和异步任务
• 二、入栈和出栈
• 三、例子与解析
• setInterval和setTimeout

console.log('1');
setTimeout(function(){
    console.log('2');
},0);
setTimeout(function(){
    console.log('3');
},2000);
console.log('4');

一、线程和进程

在解释JavaScript事件循环机制之前我们先了解线程和进程。
进程 是CPU资源分配的最小单位
线程 是CPU调度的最小单位

如上图：进程就像是工厂，每个工厂都有自己专属的工厂资源。
线程则像是工厂里的员工，一个工厂雇佣n个工人，并共享对应工厂的资源
工厂与工厂之间独立存在

1、单线程和多线程

C、C++、JAVA支持多线程
JavaScript是单线程（最终操作页面的dom结构，以防两个JS同时操作页面的同一个dom节点而造成混乱）
浏览器是多线程（每个tab页为对应一个进程，多个空白页则进程合并为一）

2、GUI渲染线程

主要负责页面的渲染，解析HTML、CSS，构建DOM树，布局和绘制等。
当界面需要重绘或者由于某种操作引发回流时，将执行该线程。
该线程与JS引擎线程互斥，当执行JS引擎线程时，GUI渲染会被挂起，当任务队列空闲时，JS引擎才会去执行GUI渲染。

3、JS引擎线程

该线程当然是主要负责处理 JavaScript脚本，执行代码。
也是主要负责执行准备好待执行的事件，即定时器计数结束，或者异步请求成功并正确返回时，将依次进入任务队列，等待 JS引擎线程的执行。
该线程与 GUI渲染线程互斥，当 JS引擎线程执行 JavaScript脚本时间过长，将导致页面渲染的阻塞。

4、同步任务和异步任务

同步任务：可以立即执行的任务。
Console.log()、new Promise、var、±*/;
异步任务：不立即执行

• 宏任务
  任务队列可多个（script(全局任务)， setTimeout， setInterval， setImmediate， I/O， UI rendering）
• 微任务
  任务队列只有一个 （process.nextTick， Promise的then()， MutationObserver）

二、入栈和出栈

栈 就像是一个容器，任务都是在栈中执行。
主线程 就像是操作员，负责执行栈中的任务。
任务队列 就像是等待被加工的物品。

异步任务完成注册后会将回调函数加入任务队列等待主线程执行。
执行栈中的同步任务执行完毕后，会查看并读取任务队列中的事件函数，于是任务队列的函数结束等待状态，进入执行栈，开始执行。

三、例子与解析

console.log(1);
function fn1 (){
    console.log(2);
}
function fn2 (){
    console.log(3);
    fn1();
}
setTimeout (function(){
    console.log(4);
},2000);
fn2();
console.log(5);

流程图如下：
（注：W3C在 HTML标准中规定，规定要求 setTimeout中低于 4ms的时间间隔算为 4ms）

四、setInterval和setTimeout

当使用setInterval来进行页面实时刷新数据（ajax请求）时， setInterval会不断消耗网页内存，如果不清理会一直消耗直到网页卡死。

解决方法一：保证setInterval对象只创建一次

var status = true;
Var time = function (param) {                
$.ajax({  
    success: function (returnValue) {                          
        if (status) {
           status= false; 
　　　　　　　window.setInterval(" time()", 5000); 
　　　　}
 　　} 
　});

解决方法二：执行一次clearTimeout一次