JavaScript（二）----eventloop事件循环机制

JavaScript是单线程。

单线程原因

• 为了避免复杂性，浏览器脚本语言的优势
  作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM，假如使用多线程在同一时间点对DOM进行增删操作，浏览器无法分辨以哪个进程为准。

为什么有同步任务与异步任务之分

提高GPU的利用效率

js任务执行

js中的同步任务会在主线程按照顺序执行，异步任务会进入任务队列，在主线程会形成一个执行栈，主线程中的任务执行完毕后，会在任务队列中去查看事件，将异步任务放入执行栈，开始执行。

事件循环EventLoop

主线程从任务队列中读取事件，这个过程是不断循环的，因此这个运行机制称为Event Loop

异步任务又分为宏任务（macrotask）和微任务（microtask），那么任务队列就有了宏任务队列和微任务队列，微任务总是在宏任务之前执行，也就是说：同步任务>微任务>宏任务，

宏任务&微任务.png

js代码执行流程

执行流程.png 事件循环.png

总结

• 宏队列macrotask一次只从队列中取一个任务执行，执行完后就去执行微任务队列中的任务；
• 微任务队列中所有的任务都会被依次取出来执行，知道microtask queue为空；
• 图中没有画UI rendering的节点，因为这个是由浏览器自行判断决定的，但是只要执行UI rendering，它的节点是在执行完所有的microtask之后，下一个macrotask之前，紧跟着执行UI render。