JS内部事件机制之单线程原理
任务队列
主线程:正在执行的代码,会生成函数调用栈。
- macro-task(宏任务,新名:task)包括:script(整体代码),setTimeout,setInterval,setImmediate,I/O,UIrendering。
- micro-task(微任务,新名:jobs)包括:process.nextTick,Promise,Object.observe(已废弃),MutationObserver(html5新特性,队列中只能有一个)
任务分类
同步任务,语句只按语句先后顺序执行,前面未执行完,不会执行后面语句。
异步任务,语句不在语句先后顺序上执行,执行到该代码时,加入到相应任务队列,延后执行。
单线程
主线程从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的jobs。当所有可执行的jobs执行完毕之后。循环再次从task开始,找到其中一个任务队列执行完毕,然后再执行所有的jobs,这样一直循环下去。
注意事项
- setTimeout最小间隔不能低于4毫秒,否则会自动增加。
- DOM的渲染每16毫秒执行一次,因为显示器是60Hz,16ms刷新一次。
- process.nextTick任务会在jobs里单独维护一个队列,并且在其他jobs任务之前执行。
- 冒泡事件会直接在子元素事件执行完成后,插入在主线程中。如果主线程不为空,那么会优先于jobs执行。
经典示例
示例详解:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
通过鼠标点击
进阶--通过js执行