js---事件执行机制

Event Loop事件执行机制

• 1. 同步代码一行一行按先后顺序放在Call Stack执行，并在浏览器中输出，执行完就会相应的清空；
• 2. 遇到异步会先放到web APIs等容器中，等同步执行完毕且异步到了执行时机时，异步会从web APIs等容器转移至Callback Queue队列中，被Event Loop扫描到，放到call Stack执行
• 3. Call Stack执行栈中没有执行的代码时，Event Loop就开始它的扫描工作，扫描的对象是Callback Queue队列，然后将扫描的任务放到Call Stack中
• 4. web APIs容器包含 setTimeout + ajax + DOM事件回调

宏任务和微任务

• 1. 宏任务：setTimeout/setInterval + ajax + DOM事件回调
• 2. 微任务：Promise + async/await
• 3. 微任务执行时机要早于宏任务
• 4. 耗时相同下，宏任务或微任务是按照代码先后顺序执行

Event Loop 和 DOM渲染

• 1. js的执行是单线程的，并且和DOM渲染公用1个线程
• 2. 每当Call Stack里面空时，就是先微任务的执行，然后尝试DOM渲染，最后宏任务。宏任务执行完成也就是Call Stack里面空时，又开始循环尝试DOM渲染，然后宏任务。