前端浏览器刷新事件_【前端进阶】深入浅出浏览器事件循环【内附练习题】

引子：为什么会有事件循环

重点: javascript 从诞生之日起就是一门单线程的非阻塞的脚本语言

我们先来聊下 JavaScript 这两个特点：

• 单线程：JavaScript 是单线程的，单线程是指 JavaScript 引擎中解析和执行 JavaScript 代码的线程只有一个(主线程)，每次只能做一件事情。单线程存在是必然的，在浏览器中， 如果 javascript 是多线程的，那么当两个线程同时对 dom 进行一项操作，例如一个向其添加事件，而另一个删除了这个 dom，这个时候其实是矛盾的

• 非阻塞：当我们的 Javascript 代码运行一个异步任务的时候(像 Ajax 等)，主线程会挂起这个任务，然后异步任务返回结果的时候再根据特定的结果去执行相应的回调函数

如何做到非阻塞呢？这就需要我们的主角——事件循环(Event Loop)

浏览器中的事件循环

我们看一个很经典的图，这张图基本可以概括了事件循环(该图来自演讲—— 菲利普·罗伯茨：到底什么是Event Loop呢？| 欧洲 JSConf 2014^[1])后面演示用的 Loupe^[2] 也是该演讲者写的((Loupe是一种可视化工具，可以帮助您了解JavaScript的调用堆栈/事件循环/回调队列如何相互影响))

当 javascript 代码执行的时候会将不同的变量存于内存中的不同位置：堆(heap)和栈(stack)中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针

执行栈(call stack)：当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境(context)，又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈

比如，如下是一段同步代码的执行

function a() {
     
    b();
    console.log('a');
}
function b() {
     
    console.log('b')
}
a();

我们通过 Loupe 演示下代码的执行过程：

• 执行函数 a()先入栈
• a()中先执行函数 b() 函数b() 入栈
• 执行函数b(), console.log('b') 入栈
• 输出 b， console.log('b')出栈
• 函数b() 执行完成，出栈
• console.log('a') 入栈，执行，输出 a, 出栈
• 函数a 执行完成，出栈

同步代码的执行过程是相对比较简单的，但涉及到异步执行的话，又是怎样的呢？

事件队列(callback queue): js 引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js 会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列

被放入事件队列不会立刻执行起回调，而是等待当前执行栈中所有任务都执行完毕，主线程空闲状态，主线程会去查找事件队列中是否有任务，如果有，则取出排在第一位的事件，并把这个事件对应的回调放到执行栈中，然后执行其中的同步代码

看 Loupe 官方的一个例子：

$.on('button', 'click', function onClick() {
     
    setTimeout(function timer() {
     
        console.log('You clicked the button!');    
    }, 2000);
});

console.log("Hi!");

setTimeout(function timeout() {
     
    console.log("Click the button!");
}, 5000);

console.log("Welcome to loupe.");

我们分析一下这个执