浏览器学习笔记--09 事件循环

事件循环

event loop

当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分，heap中一般存储我们的变量，stack一般存储函数或者方法。stack叫做执行栈，我们的方法依次会在这里执行。执行栈事件先进后出，任务队列先进先出。web apis则是代表一些异步事件，而callback queue即事件队列。

对照图片我们解释一下整个事件循环机制

执行栈执行主线程任务，当有操作dom，ajax交互，使用定时器异步操作的时候，这些任务会被移入到 callback queue 任务队列中
当主线程任务执行完毕为空时，会读取callback queue队列中的函数，进入主线程执行
上述过程会不断重复，也就是常说的Event Loop(事件循环)。

主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。

执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。

页面使用单线程的缺点

主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。

执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。

第一个问题是如何处理高优先级的任务。
第二个是如何解决单个任务执行时长过久的问题。

第一个
通常我们把消息队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列，在执行宏任务的过程中，如果 DOM 有变化，那么就会将该变化添加到微任务列表中，这样就不会影响到宏任务的继续执行，因此也就解决了执行效率的问题。
等宏任务中的主要功能都直接完成之后，这时候，渲染引擎并不着急去执行下一个宏任务，而是执行当前宏任务中的微任务，因为 DOM 变化的事件都保存在这些微任务队列中，这样也就解决了实时性问题。

macrotask（宏任务）：script(整体代码), XHR回调、事件回调（鼠标键盘事件）setTimeout, setInterval, I/O, UI rendering

microtask（微任务）Promises.then, MutationObserver

第二个
JavaScript 可以通过异步/回调功能来规避这种问题

ajax，Promises，async