彻底搞清楚JS浏览器事件循环机制

一、概述

在分析浏览器的渲染过程之前，我们先了解一下什么是进程和线程：

（1）什么是进程？

进程是CPU进行资源分配的基本单位

（2）什么是线程？

线程是CPU调度的最小单位，是建立在进程的基础上运行的单位，共享进程的内存空间。

那么我们可以得出结论：

1、进程是会占用系统资源；2、一个进程内可以存在一个或者多个线程，这就是单线程和多线程；3、无论是单线程还是多线程都是在一个进程内。

二、多进程

1、浏览器是多进程

2、不同类型的标签页都会开启一个新的进程

3、相同类型的标签页是会合并到一个进程

上图中浏览器的各个进程的主要作用：

1、浏览器进程

（1）负责管理各个标签页的创建和销毁

（2）负责浏览器的页面显示和功能（前进，后退，收藏等）

（3）负责资源的管理与下载

2、第三方插件进程

（1）负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程

3、GPU进程

（1）负责3D绘制和硬件加速

4、浏览器渲染进程（咱们这回主要分析的）

1、浏览器内核，主要负责HTML，CSS，JS等文件的解析和执行

单线程和多线程是什么意思 ?

多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务;

单线程就只有一个执行流;

三、浏览器内核

浏览器内核就是浏览器渲染进程，从接收下载文件后再到呈现整个页面的过程，由浏览器渲染进程负责，主要流程如下：

1、解析HTML文件和CSS文件，加载图片等资源文件，渲染成用户看到的页面

2、执行解析js文件脚本代码

这里主要讲浏览器页面渲染过程，在该过程中浏览器渲染进程会开启多个线程协作完成，主要的线程以及作用如下：

1. GUI渲染线程
   （1）当浏览器收到响应的html后，该线程开始解析HTML文档构建DOM树，解析CSS文件构建CSSOM，合并构成渲染树，并计算布局样式，绘制在页面上(该处可深挖的坑，HTML解析规则，CSS解析规则，渲染流程细节)
   （2）当界面样式被修改的时候可能会触发reflow和repaint，该线程就会重新计算，重新绘制，是前端开发需要着重优化的点

2. JS引擎线程
   （1）JS内核，也称JS引擎（例如V8引擎），负责处理执行javascript脚本程序，
   （2）由于js是单线程（一个Tab页内中无论什么时候都只有一个JS线程在运行JS程序），依靠任务队列来进行js代码的执行，所以js引擎会一直等待着任务队列中任务的到来，然后加以处理。

3. 事件触发线程
   （1）归属于渲染（浏览器内核）进程，不受JS引擎线程控制。主要用于控制事件（例如鼠标，键盘等事件），当该事件被触发时候，事件触发线程就会把该事件的处理函数添加进任务队列中，等待JS引擎线程空闲后执行

4. 定时器出发线程
   （1）传说中的setInterval与setTimeout所在线程
   （2）浏览器的定时器并不是由JavaScript引擎计数的，因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响计时的准确，因此通过单独的线程来计时并触发定时器，计时完毕后，满足定时器的触发条件，则将定时器的处理函数添加进任务队列中，等待JS引擎线程空闲后执行。
   （3）W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms

5. 异步HTTP请求线程
   （1）当XMLHttpRequest连接后，浏览器会新开的一个线程，当监控到readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进任务队列中，等待JS引擎线程空闲后执行
   （2）注意：浏览器对通一域名请求的并发连接数是有限制的，Chrome和Firefox限制数为6个，ie8则为10个。

总结：2-5 四个线程参与了JS的执行，但是永远只有JS引擎线程在执行JS脚本程序，其他三个线程只负责将满足触发条件的处理函数推进任务队列，等待JS引擎线程执行。

GUI渲染线程与JS引擎线程互斥

由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎为互斥的关系。

当JS引擎执行时GUI线程会被挂起，GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。

JavaScript 引擎是单线程

JavaScript 引擎是单线程，也就是说每次只能执行一项任务，其他任务都得按照顺序排队等待被执行，只有当前的任务执行完成之后才会往下执行下一个任务。

基本概念

1、js的执行过程是单线程的模式，也就是同步进行，只有前面的代码执行完了才会往下面执行

2、但是执行js代码也只是浏览器的线程之一所负责的事情，这个线程被称为js引擎，浏览器还具有其他线程：界面渲染线程（UI）、浏览器事件触发线程（控制交互，响应用户）、http请求线程（处理请求，而ajax发送请求则会委托浏览器新开一个http线程）、EventLoop轮询线程（负责轮询消息队列）

3、浏览器中js代码的作用：执行JavaScript代码 、对用户的输入（包含鼠标点击、键盘输入等等）做出反应 、处理异步的网络请求

js单线程

1、单线程的含义是js只能在一个线程上运行，也就说，js同时只能执行一个js任务，其它的任务则会排队等待执行。

2、js是单线程的,并不代表js引擎线程只有一个。js引擎有多个线程，一个主线程，其它的后台配合主线程。

3、多线程之间会共享运行资源，浏览器端的js会操作dom，多个线程必然会带来同步的问题，所有js核心选择了单线程来避免处理这个麻烦。js可以操作dom，影响渲染，所以js引擎线程和UI线程是互斥的。这也就解释了js执行时会阻塞页面的渲染

js消息队列

1、JavaScript运行时，除了一个运行线程，引擎还提供一个消息队列，里面是各种需要当前程序处理的消息。新的消息进入队列的时候，会自动排在队列的尾端

2、单线程意味着js任务需要排队，如果前一个任务出现大量的耗时操作，后面的任务得不到执行，任务的积累会导致页面的“假死”。这也是js编程一直在强调需要回避的“坑”

js执行任务方式

1、首先js任务分两种：同步任务、异步任务

2、同步任务：在主线程排队支持的任务，前一个任务执行完毕后，执行后一个任务，形成一个执行栈，线程执行时在内存形成的空间为栈，进程形成堆结构，这是内存的结构。执行栈可以实现函数的层层调用。注意不要理解成同步代码进入栈中，按栈的出栈顺序来执行。

3、异步任务：会被主线程挂起，不会进入主线程，而是进入消息队列，而且必须指定回调函数，只有消息队列通知主线程，并且执行栈为空时，该消息对应的任务才会进入执行栈获得执行的机会。

4、主线程说明：

（1）所有同步任务都在主线程上执行，形成一个执行栈。
（2）主线程之外，还存在一个”任务队列”（消息队列）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”（消息队列），看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

5、消息队列说明：

（1）消息队列队列(或者叫任务队列）是一个事件的队列，IO响应时（鼠标点击等输入输出设备的操作），会往队列中添加一个消息，此时说明相关的异步代码到了执行的时机，可以进入主线程的执行栈了。

（2）主线程读取消息队列，可以读取到对应的事件。

（3）消息队列可以响应IO事件，还有用户产生的事件（比如点击鼠标，页面滚动），只要指定了回调函数，就会进入消息队列，等待EventLoop轮询线程处理，是否可以进入主线程的执行栈。

（4）消息和回调函数相互联系的含义：主线程读到消息，就会执行相应的回调函数；进入消息队列的消息，必须对应相应的回调函数，否则这个消息会被丢弃不会进入消息队列。

（5）消息队列是一个先进先出的队列结构，这就决定了它的执行顺序，先产生的消息会被主线程先读取，会不会执行则会先检查一下执行时间，因为存在setTimeout等定时函数，这类事件产生的消息进入到消息队列，被执行的时机取决与它在队列中的位置和执行时间有关。【使用setTimeout能够避免阻塞UI线程就是这个原因】。

5、需要注意的是：执行栈中的代码（同步任务），总是在读取”任务队列”（异步任务）之前执行。

EventLoop

1、主线程从”任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

2、简单说，浏览器的两个线程：一个负责程序本身的运行，称为”主线程”；另一个负责主线程与其他进程（主要是各种I/O操作）的通信，被称为”Event Loop线程”（可以译为”消息线程”）。

3、由于js是运行在单线程上的，所有浏览器单独开启一个线程来处理事件消息的轮询，避免阻塞js的执行。

异步代码执行逻辑

1、每当遇到I/O的时候，主线程就让EventLoop线程去通知相应的I/O程序，然后接着往后运行，所以不存在等待时间。等到I/O程序完成操作，EventLoop线程把消息添加到消息队列，主线程就调用事先设定的回调函数，完成整个任务。

2、js的ajax是new XMLHttpRequest()对象实现的，浏览器会新开一个线程来处理http请求，这就是ajax能够实现局部刷新的同时，还能响应用户交互的原因。

定时器

1、前面也提到了定时器，定时器是会在进入消息队列，这也就和异步代码的执行逻辑一样了。它在”消息队列”的尾部添加一个消息，因此要等到同步任务和”消息队列”现有的任务都处理完，才会得到执行的机会，还要看定时器设置的时间是否到了才会执行。

<script>
    for(var i = 0 ; i < 10; i++){
       setTimeout(function(){
           console.log(i);//打印10次10
       },0);
    }
</script>

所以，只有等到主线程的任务执行完之后，setTimeout中的事件才会被执行，虽然时间间隔是0秒，但是必须等主线程任务完成，所以最后打印的都是10

2、可以用闭包来解决问题，每次执行for循环的时候，把函数作为返回值给setTimeout作为参数，函数里面存着从for循环里面拿到的每一个值，下面代码会返回多个函数，每个函数的j值都不一样

<script>
    for(var i = 0; i< 3; i++){
        function foo(j){
        // var j;
        // j = 实参
        //j = i
            return function(){
                console.log(j);
            };
        }
        //0
        var f = foo(i);
        setTimeout(f, 0);
    }
</script>

总结

Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。

JS 调用栈

JS 调用栈是一种后进先出的数据结构。当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。

同步任务、异步任务

JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行，异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。

Event Loop

调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。


宏任务(macro-task)、微任务(micro-task)

除了广义的同步任务和异步任务，JavaScript 单线程中的任务可以细分为宏任务和微任务。

macro-task包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver。

有了宏任务和微任务的概念后，那 JS 的执行顺序是怎样的？是宏任务先还是微任务先？

第一次事件循环中，JavaScript 引擎会把整个 script 代码当成一个宏任务执行，执行完成之后，再检测本次循环中是否寻在微任务，存在的话就依次从微任务的任务队列中读取执行完所有的微任务，再读取宏任务的任务队列中的任务执行，再执行所有的微任务，如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。