Javascript事件循环——Event loop
引言
Javascript是一门单线程的脚本语言,无法进行多线程编程;
因此为了不阻塞编程,Javascript通过事件循环的方式解决耗时任务,实现类多线程编程;
单线程
单线程意味着在浏览器中,同一时间只能做一件事,其他的行为和事件都会在事件队列中排队;
Javascript单线程的特性与其用途有关;作为浏览器脚本语言,我们需要进行各种DOM操作,如果Javascript是多线程的,当两个线程同时操作同一DOM,一个向其添加事件,一个要删除此节点,浏览器该以哪个线程为准呢。
HTML5 webworker技术,允许Javascript脚本创建多个线程,但子线程完全受主线程控制,且不得操作DOM,未能改变其单线程的本质。
执行环境 Execution Context
每当程序的执行流入到一个可执行的代码区块时,就进入到一个执行环境中;
当Javascript被浏览器载入后,默认最先进入的是全局执行函数,之后,函数的每次调用都会新建执行环境;
执行环境栈 Execution stack
执行流依次进入的执行环境在逻辑上形成一个栈,栈的底部总是全局执行环境;栈的顶部是处于活动状态的当前的执行环境;
每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境会被推入一个环境栈中,函数执行完成后,栈将其环境弹出,把控制权还给之前的执行环境;
注意每次函数调用都会创建一个执行环境压入栈中,无论是函数内部的函数还是递归;
事件循环
运行机制
- 事件循环器会检查事件队列是否为空,如果为空,继续检查;不为空,执行2;
- 取出事件队列的首项,压入执行栈;
- 执行任务;
- 检查执行栈是否为空,如果为空,执行1;不为空,继续检查;
macro task与micro task
异步任务被分成两类微任务(micro task)和宏任务(macro task);
macro task:
script 指一开始执行的 <script> 标签
setTimeout();
setInterval();
setImmediate()
I/O
交互事件
micro task:
new Promise();
new MutaionObserver();
同一事件循环中,微任务的执行优先级高于宏任务,只有当微任务为空后,才会去宏任务的执行队列中取出最前面的一个事件,压入执行栈
注意事项
- 异步程序是一个一个独立的任务,这些任务包括:setTimeout、setInterval、ajax、eventListener等
- 事件队列严格按照时间先后顺序将任务压入执行栈中;
- 当执行栈为空时,浏览器会一直不停的检查事件队列,如果不为空,则取出第一个任务;
- 在每一个任务结束后,浏览器会对页面进行渲染;保障用户浏览页面时不会出现页面阻塞的可能;
- 当执行栈为空时,便生成一个microtask检查点;
- 微任务的执行优先级高于宏任务;
扩展
内存区域 堆(heap)和栈(stack)
Javascript执行代码时会将不同的变量存于内存中不同的位置:堆(heap)和栈(stack),堆中存放着对象,栈中存放着一些基础类型的变量以及对象的指针;
stack是有结构的,每个区块按照一定次序存放,可以明确知道每个区块的大小;heap是没有结构的,数据可以任意存放,因此stack的寻址速度快于heap;
每个线程分配一个stack,每个进程分配一个heap,stack是线程独占的,heap是线程共用的。
stack创建时,大小确定,数据超过这个大小,会发生stack overflow错误;
heap大小不确定,需要的话可以不断增加;
数据存放的规则是:只要是局部的,占用空间确定的数据,一般放在statck,否则放在heap里面;
stack数据在任务结束后就会销毁;
heap中的数据的销毁依赖垃圾清理机制;一般内存泄漏发生在heap,即某些内存不再使用,却因为种种原因,没有被系统回收;
参考文章
深入理解 JavaScript 事件循环(一)— event loop
[译] 深入理解 JavaScript 事件循环(二)— task and microtask
详解JavaScript中的Event Loop(事件循环)机制
Tasks, microtasks, queues and schedules
Stack的三种含义
JavaScript 运行机制详解:再谈Event Loop