js Event Loop 事件循环

2023-03-05 01:08:01JavaScript018

js Event Loop 事件循环,第1张

Event Loop即事件循环，是解决javaScript单线程运行阻塞的一种机制。主要是为了协调单线程下，事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞。

因为JavaScript 是单线程，也就是说，所有任务需要排队，前一个任务结束，才会执行后一个任务。

但是IO设备（输入、出设备）可能会因为网络等因数导致速度很慢（比如Ajax）继而CPU没有充分利用，所以设计者将IO设备的任务挂起，先执行后面的任务，等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。于是，就把所有任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

只有前一个任务执行完毕，才能执行后一个任务；直接在主线程上排队执行且最先执行，形成一个执行栈

不进入主线程、而是进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，执行一个宏任务，执行过程中如果遇到微任务，就将它添加到微任务的任务队列中宏任务执行完毕后，再依次执行执行当前微任务队列中的所有微任务，当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

（4）主线程不断重复上面的第三步。

"任务队列"是一个先进先出的数据结构，也是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

例子1

例子2：

例子3：

nodejs事件循环和浏览器的事件循环不一样的。浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现

一、线程和进程基本概念

进程：操作系统分配的占有CPU资源的最小单位。拥有独立的地址空间。

线程：安排CPU执行的最小单位。同一个进程下的所有线程，共享进程的地址空间。

简单讲，计算机就像工厂，进程是个大车间，计算机内部有很多个这样的大车间。线程是工人，每一个车间里的工人至少有一个。

为什么这么画呢？有点一个挨一个的效果呢？是因为以前我就老是疑惑进程或者线程运行时到底是并行？还是串行？

其实，在单CPU或单核的情况下，宏观上无论是进程也好，线程也罢，都是并行的。而在微观下，某一个具体的时刻，他们实际上都是串行的。在多CPU或多核的情况下，才是真正意义的并行。

二、线程和进程的关系、通性

关系：进程中包含着至少一个线程。在进程创建之初，就会包含一个线程，这个线程会根据需要，调用系统库函数去创建其他线程。但需要注意的是，这些线程之间是没有层级关系的，他们之间协同完成工作。在整个进程完成工作之后，其中的线程会被销毁，释放资源。

通性：都包含三个状态，就绪、阻塞、运行。通俗的讲，阻塞就是资源未到位，等待资源中。就绪，就是资源到位了，但是CPU未到位，还在运行其他。

三、线程的好处

既然，线程和进程是存在通性的，那么为什么操作系统还要设置线程这个单位，那就说说线程的几点好处：

1、在一个程序中，多个线程可以同步或者互斥并行完成工作，简化了编程模型；

2、线程较进程来讲，更轻；

3、线程虽然微观并行。但是，在一个进程内部，一个线程阻塞后，会执行这个进程内部的其他线程，而不是整体阻塞。从某种意义上，提高了CPU的利用率。

四、市面上的通用叫法

单线程与多线程，都指在一个进程内的单和多。不要笑我，之前真的不懂。心中那只小羊驼，奔过来，跑过去。还抬起了傲娇的眼睛，看了我一眼，呵呵~~~

五、javaScript单线程执行机制

1、首先解释下，单线程和多线程。

什么是单线程？单线程就是一个进程中只有一个线程。程序顺序执行，前面的执行完，才会执行后面的程序。

什么是多线程？多线程就是一个进程中只有多个线程。在进程内部进行线程间的切换，由于每个线程执行的时间片很短，所以在感觉上是并行的。

2、那么为什么感觉上javaScript是多线程？而且还支持AJAX异步呢？AJAX是真正的异步吗？

先说明，从哪里可以得出javaScript是单线程。比如你页面一上来就alert（“hello world~”）；只要你不关闭这个对话框，后续的js代码就不会再执行。因为，单线程就是这样一步一步的顺次执行，前面不执行完，后面不会执行。也就是说，在具体的某一时刻，只有一段代码在执行。

可是，JavaScript明明可以处理各种触发事件，感觉上是异步多线程啊。其实，它的原理是这样的，JavaScript单线程的执行浏览器的一个事件队列，要执行的函数和触发事件的回调函数都被放在这个队列中。比如，我点击率一下按钮，之后又将浏览器缩小了，那么这两个事件的回调函数就会顺次地被放在当前执行的“函数”之后，再一一执行。

那么，既然JavaScript是单线程，那么如何维护这个函数队列呢，他分身无术啊。这时候，就需要知道，浏览器可不是单线程。虽然，每一个window只有一个js引擎，但是浏览器是事件驱动的、异步的、多线程的。

浏览器内部有一个事件轮询（event loop），是一个大的内部消息循环，会轮询大的消息队列，并执行。也就是js要处理的事件队列，是浏览器维护的。

浏览器至少有四个线程（不同浏览器会有差异）： js引擎线程、界面渲染线程、浏览器事件触发线程、http请求线程。

其实，到这里就说的很明白了。但是，又想到了延时函数（setTimeout）的例子，感觉上，因为没有阻塞执行，会感觉是异步，其实并不是。只是，js在执行到延时函数时，会触发浏览器的定时器，到设置时间，浏览器再将这个函数放入执行的函数队列，再由JavaScript引擎执行。都是在浏览器空闲了才会执行。

关于AJAX的异步，是真正的异步。同样的道理，在调用AJAX的时候，浏览器会开辟一个新的线程，去处理这个请求，得到响应后，如果这个请求有回调，会将这个回调再放入事件队列中。再由JavaScript引擎执行。

3、关于JavaScript的阻塞

浏览器虽然是多线程，但是由于JavaScript具有阻塞特性，无论外链还是内嵌脚本，在浏览器执行解释js脚本的时候，浏览器是不会去做别的事情的，比如渲染页面，而是直到js下载并执行完毕。

这样，js脚本的下载、解释执行，会反该页面的继续绘制，给用户带来不良的体验。所以，要对其优化，有如下几点：

a、将<script>内嵌和外链，在可以的情况下，放在<body>底部。注：对于css，浏览器是并行下载

b、在页面onload后，加载js

c、html5 <script>标签的defer属性，在页面加载完成后下载

d、使用创建<script>标签的方式，在页面加载完成后添加进去。