模型原理图

模型原理图

以定时器为例。假设我们指定的是1000毫秒。不是到了时间就执行。而是将回调函数交给分线程。到了时间点将回调函数放到Callback Queue中。点击函数也是一样的道理。当我们点击按钮的时候只是将函数放到Callback Queue中。

我们只有执行完stack中的初始化代码，才可以从Callback Queue中选择事件执行。

代码分类：

1. 初始化代码
2. 回调代码

初始化代码执行完之后才有可能执行回调代码。初始化代码会将回调函数交给Web APIs模块进行管理。等到了合适的时机才将这些回调函数放到Callback Queue中。初始化代码执行完毕之后再循环调用Callback Queue中的事件。

模型两个重要的组成部分：
事件（DOM/Ajax/定时器）管理模块
回调队列

实例

function fn1(){
  console.log('fn1')
}
fn1()

document.getElementById('btn').onClick = function(){
  console.log('Click Button.')
}

setTimeOut(function(){
  console.log('Timer is executing.')
}, 1000)

function fn2(){
  console.log('fn2')
}
fn2()

执行代码，我们发现先执行fn1和fn2。一秒之后执行“Timer is executing.”如果我们可以在一秒之内点击按钮，'Click Button'事件会在定时器事件之前执行。

相关重要概念

执行栈：所有代码在此空间中执行。
浏览器内核：JS主线程执行模块，其它模块
Callback Queue：任务队列，消息队列，事件队列，回调队列
事件轮询：初始化代码执行完之后，循环调用Callback Queue中的所有事件（Event Loop）。
事件驱动模型：上述原理图
请求响应模型：浏览器发送请求给服务器，服务器接收并处理请求，返回响应数据给浏览器。浏览器接收响应并渲染。