js eventloop

Posted 2021-12-22 lin-fighting

浏览器事件环

为了实现js的异步概念。js是单线程的（主线层），内部是多线程的，比如setTimeout，ajax。

• 进程：计算机分配任务的最小单位
• 线程：进程里包含多个线程
• 浏览器是由多个进程运行的，每个网页都是一个进程。浏览器也有一个主进程（用户界面），网络进程（处理请求），渲染进程，GPU进程（3d绘制），第三方插件的进程等等

渲染进程（包含多个线程）

• GUI渲染线程（渲染页面）
• js引擎线程，和GUI线程互斥。（跟gui共用同个线程，只能通个时间开启一个，也叫”单线程“）
• 事件触发线程，独立的线程(EventLoop)
  EventLoop解决的是js执行时可能会调用异步方法，这些方法是怎样调度执行的。
• 事件click,setTimeout,ajax也是一个独立线程。
  代码的执行过程：
  

事件循环

• js引擎线程执行代码，遇到类似于ajax setTimeout evnet等类型会调用浏览器api放入宏任务队列去维护，如setTimeout是时间到了才会放入任务队列，（先进先出的原则），而遇到promise.then等就会存放入微任务队列。
• 等待js主线程任务完成后先执行微任务队列，微任务队列执行完毕后，再渲染页面。
• 每次宏任务的时候，会创建单独的微任务队列，微任务在执行完毕之后，浏览器会检测是否要重新渲染（有刷新频率，看有时间渲染没有)
• 再去宏任务中取出一个任务进行，这时候又会创建一个新的微任务队列。即每次循环都会执行一次宏任务，都会清空微任务队，每一次循环都不一定会渲染）
• 渲染完页面后才会执行宏任务队列（不停的扫描队列，将队列的任务拿到主线程进行运行,而这个事情就是事件循环线程做的事eventloop[事件循环就是检测当前执行栈是否为空，如果为空就取出来执行。]）。
• react的useEffect与useLayoutEffect也是这个区别，一个是宏任务，一个是微任务。
• 注意：微任务中又产生了微任务，会继续放入当前的微任务队列，在本轮直接清空。 事件按钮是宏任务，但如果在代码直接写xx.click()。据相当于直接运行，并不是宏仁无，只有点击页面的按钮之后才会开启宏任务。