以下内容均为学习分享，如有错误或遗漏，欢迎各位前辈指点...

事件循环

事件循环是异步的实现方式，单线程是事件循环的产生原因

什么是进程

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程。
每个应用有自己专属的进程，进程之间是相互隔离的，但是在双方同意的情况下，可以进行通信。

什么是线程

有了进程后，就有了内存空间，线程可以理解为内存空间中运行代码的地方
需要注意的是，一个进程至少得有一个线程，在进程开启后会自动创建一个线程来运行代码，该线程就被称为主线程
如果主线程结束，整个程序就已经结束了
如果线程比较复杂，例如js中需要执行类似斐波那契数列这种复杂的运算同时执行多块代码，主线程会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

浏览器的进程模型简析

浏览器是一个多进程多线程的应用程序
浏览器的内部工作十分复杂
为了避免相互影响和减少连环崩溃的几率，当启动浏览器后，它会自动启动多个选择

可以在浏览器的任务管理器中看到浏览器的所有进程

一个标签页开启一个新的渲染进程，这样可以保证标签页之间不互相影响**

浏览器主要的三个进程

浏览器进程(启动其他进程) 负责界面展示，用户交互，子进程管理（网络进程，渲染进程等都是浏览器进程启动的）
网络进程负责加载网络资源，网络进程内部会启动多个线程来处理不同的网络任务
渲染进程渲染进程启动后，会开启一个渲染主线程，主线程只要负责执行HTML,CSS,JS代码。（一个标签页开启一个新的渲染进程，这样可以保证标签页之间不互相影响）

渲染主线程是如何工作的

(注：事件循环就发生在渲染进程的主线程中）渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括：

解析HTML
解析css
计算样式
布局
处理图层
每秒把画面画60次
执行全局JS代码
执行事件处理函数
执行计算器的回调函数
.....

扩展1：为什么渲染进程不适合多个线程来处理这些事情？
答：会造成dom渲染冲突

要处理多任务，主程序如何调度？

例如
用户点击按钮触发事件，而某个定时器此时也到达了时间，应该优先处理哪一个？
正在执行一个js函数，执行到一半，用户点击了按钮触发事件，此时应该执行哪一个？
正在执行一个js函数，执行到一半，定时器到达时间，应该先执行定时器里的回调函数嘛。

渲染主线程如何来处理这个问题？排队

在最开始的时候，渲染主线程会进入一个无限循环
每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完后进入下一次循环，如果没有。就进入休眠状态
其他所有的线程（包括其他进程的线程）可以随意向消息队列添加任务，新任务会加到消息队列的末尾。在添加新任务时，如果主线程处于休眠状态，则会将其唤醒以继续循环拿取任务这样以来，就可以让每个任务有条不紊的，持续的进行下去了整个过程，被称之为事件循环（消息循环）

何为异步

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

计时器回调中需要执行的任务--setTimeout、setInterval
网络通信完成后需要执行的任务--new XMLHttpRequest、ajax、axios、promise
用户交互后需要执行的任务--addEventListener 如果让渲染主线程等待这些任务执行完，就会导致主线程长期处于"阻塞"的状态，从而导致浏览器'卡死'，如下图所示的同步

主线程承担着及其重要的工作，无论如何都不能阻塞 因此，浏览器选择异步来解决问题，让主线程永不阻塞

//如下图所示
1. 在主线程中，计时任务会直接放入计时线程中执行时，该任务结束
2. 主线程会获取消息队列中的下一个任务执行
3. 计时线程中计时任务结束后，会将回调函数放入消息队列的末尾，等待进入主线程中执行

扩展2：如何理解JS的异步？
1. JS是一门单线程语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程就只有一个，而渲染主线程承担着诸多的工作，渲染页面，执行js都在其中运行
2. 如果使用同步的方式，就极有可能造成主线程阻塞，从而导致消息队列中的很多其他的任务都无法执行，这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面，导致页面无法及时更新，给用户造成不必要的卡死现象。
3. 所以浏览器采用异步的方式来避免，具体任务是比如计时器，网络，事件监听，主线程将任务交给其他线程去处理，自身立即结束该任务的执行，转而去执行后续的代码，当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程的调度执行
4.  在这种异步模式下，浏览器永不阻塞，从而最大程度的保证了单线程的流畅运行。

js为何会阻碍渲染

var h1=document.querySelector('h1')
var btn=document.querySelector('button')
//给死循环时间
function delay(duration){
       ........
}
btn.onclick=fucntion(){
   h1.textContent="hello world"
   delay(3000)
}

渲染和js执行在一个唯一的主线程中，渲染，js执行等着；js执行，渲染等着
文本其实早就改了，只是绘制又重新在任务列表创建了新任务，所以上述代码会在3秒过后才渲染新文本到页面上。

消息队列有优先级

任务没有优先级，先进先出但是，消息队列有优先级根据w3c最新解释：

每个任务都有一个任务类型，同一个类型的任务必须在一个队列(比如，点击事件的任务一定在同一个队列中)，不同类型的任务可以分属不同的队列。浏览器可以有多个队列，在一次事件循环中，浏览器可以根据情况从不同的队列中去除任务队列
浏览器必须准备一个微队列，而微队列中的任务优先级最高。

随着浏览器的复杂急剧提升，W3C不再使用宏队列的说法

在目前chrome的实现中，至少包括下列的队列：

延时队列：用于存放计时器到达后的回调任务。优先级中
交互队列：用户存放用户操作后产生的事件处理任务。优先级高
微队列：用户存放需要最快执行的任务。优先级最高

添加到微队列的主要方式主要是使用Promise、MutationObserver
//MDN： MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。
例如：
//立即把一个函数放入微队列
Promise.resolve().then(函数）

通过示例认识事件循环

示例1

function delay(duration){
   var start=Date.now()
   while(Date.now()-start<duration){
   }
}
setTimeout（function(){ 
    console.log(1)
}，0）
delay(1000)
console.log(2)

// 2 1

示例2

setTimeout(function(){
   console.log(1)
},0)
Promise.resolve(),then(console.log(2))
console.log(3)
//3 2 1

示例3

<script type="text/javascript">
 function a(){
		 consol.log(1)
		 Promise.resolve().then(function(){
		        console.log(2)
         })
 }
 setTimeout(function(){
		 console.log(3)
		 Promise.resolve().then(a)
 },)
 Promise.resolve().then(function(){
         console.log(4)
 })
 console.log(5)
</script>
//54312

示例4

function a(){
		console.log(1)
		Promise.resolve().then(function(){
		   console.log(2)
		})
}
setTimeout(function(){
     console.log(3)
},0)
Promise.resolve().then(a)
console.log(5)
// 5 1 2 3

示例5 交互队列和延时队列的优先级

原因：W3C规定微任务消息队列的优先级最高，其他队列的优先级没有规定，但是浏览器规定，除了微任务消息队列，交互消息队列的优先级最高

<button type="button" id="start">开始</button>
<button type="button" id="interaction">添加交互任务</button>
<script type="text/javascript">
     function delay(duration){
		  var start=Date.now()//number
		  while(Date.now()-start<duration){}
	  }
	   function addDelay(){
		  console.log('添加延时队列')
		  setTimeout(()=>{
		    console.log('延时队列执行')
		  },100)
		  delay(2000)
	  }
	  function addInteraction(){
	      console.log('添加交互队列');
	      interaction.onclick=function(){
	        console.log('交互队列执行')
	       }
	      delay(2000)
	  }
	  start.onclick=function(){
		  addDelay();//先添加延时队列
		  addInteraction(); //  
		  console.log('======')
	  }
	  主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而去执行后续的代码，当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
    //主线程遇到点击事件或计时器任务会直接放入交互线程和计时器线程中，自身立即结束该任务的执行，转而去执行后续的代码，当其他线程完成时，将事先传递的回调函数包装成任务，加入到交互队列和延时队列的末尾排队，等待主线程调度执行。
</script>

扩展3： js中的计时器能做到精确计时吗？？
不行
1. 计算机硬件没有原子钟，无法做到精确计时。
2. 操作系统的计时函数本身就有少量偏差，由于JS的计时器最终调用的是操作系统的函数，也就携带了这些偏差。
3. 按照W3C的标准，浏览器实现计时器时，如果嵌套层级超过5层，则会带来4毫秒的最少时间，这样在计时时间少于4毫秒时又带来了偏差。
4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差。

事件循环总结：
事件循环又叫消息循环，官方叫message loop，浏览器的内部实现是eventloop，是浏览器渲染主线程的工作方式。
在chrome的源码中，它开启一个不会结束的for循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到消息队列的末尾即可，
过去把消息队列简单分为宏队列和微队列，这种说话目前已经无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据W3C官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列中，不同任务可以属于不同的队列。不同的任务队列有不同的优先级，在一个事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

浅析浏览器渲染进程主线程中的事件循环、消息队列和异步的关系