原本准备的 event loop 分享

基础介绍

Stack 栈

一种先入后出的数据结构。
两个基本操作：推入，弹出

Queue 队列

一种先入先出的数据结构
操作：入队，出队

两种任务：同步任务，异步任务

同步任务：在调用栈中等待主线程依次执行。

  console.log('sync');

异步任务：结果不会立即返回，一般会有一个回调函数来处理返回结果。

  setTimeout(() => {
    console.log('async');
  }, 1000);

对于Javascript的疑惑

什么是JavaScript？
- answer: Javascript 是一个单线程脚本语言。
  单线程的运行环境，它有且只有一个调用栈，它同时只能够做一件事。
那问题来了，如果使用Javascript执行上面的异步任务，那我们就需要等待它 1000ms 吗？如果这个异步任务是操作某个dom元素，是否会和用户同时操作同一个DOM元素，从而造成竞态问题？
我们开始探究

我们称 Javascript 单线程的运行环境为主线程：
之所以叫主线程是因为很多东西在它上面运行，包括 JavaScript 和样式渲染，也是DOM存在的地方。
但在我们进行渲染，接口请求和某些用户交互时，需要等待。这样它们就会造成阻塞。
所以，但是我们还是希望有其他的现场，用来处理网络，编码解码或是监听输入设备。
当这些设备完成了任务后，会把信息转交回主线程。实际上，是事件循环在指导这一切。

Event Loop

但是，我们在讲解 event loop 之前，先了解一下调用栈和任务队列

调用栈（call stack)

所有的同步任务都在主线程上执行，形成一个执行栈。只有等待栈被清空，它才能执行下一个任务。

function multiply(a, b) {
  return a*b;
}
function square(n) {
  return multiply(n, n);
}
function printSquare(n) {
 var squared = square(n);
 console.log(squared);
}
printSquare(4);

调用栈是一个记录当前程序所在位置的数据结构，如果当前进入了某个函数，这个函数就会被放入栈中。如果当前离开了某个函数，这个函数就会被弹出栈外，这是栈所做的事。

使用动画可能更加生动：

而等待异步任务将会造成阻塞，幸运的是，浏览器提供了一些 JS 引擎不具备的功能：Web APIs。它可以帮助我们处理异步操作，它包括 DOM API，setTimeout，HTTP 请求等等。

而web Api 处理完的异步操作如何回到调用栈中呢？那就需要任务队列登场了。

任务队列 (callback queue)

只有异步任务有了结果，就会被放入“任务队列”中，在任务队列中进行排队，进入调用栈。

我们再看一段代码

setTimeout(() => {
    console.log('setTimeout one');
}, 1000);
setTimeout(() => {
    console.log('setTimeout two');
}, 1000);

如果有两个事件，每个事件都会成为一个todo 项放到队列中。
通过事件循环依次的去处理他们回调。就像这样：

事件循环 (Event Loop)

Event Loop的任务：连接任务队列和调用栈。
它不停的检查 调用栈 中是否还有任务在执行，如果没有，就检查任务队列，从中弹出一个任务，放入调用栈，循环往复。

回调被放入调用栈执行，得到结果后被弹出，只留下了一个 Hey!

当执行栈执行完毕时，会立刻先处理所以微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远比宏任务之前执行。

渲染

当我们考虑到渲染，事情可能就会更加复杂，我们可以把渲染看做另一个弯道。渲染发生在每一帧的开始，包括样式计算，布局和绘制。

因为事件循环会保证在渲染之前，Javascript会将任务执行完。所以，浏览器只能默默的看着你装逼，然而他只执行最后一行代码。

button.addEventListener('click',() => {
  box.style.display = 'none';
  box.style.display = 'block';
  box.style.display = 'none';
  box.style.display = 'block';
  box.style.display = 'none';
  box.style.display = 'block';
  box.style.display = 'none';
  box.style.display = 'block';
  box.style.display = 'none';
});

再一些老的动画库中，人们喜欢使用setTimeout来绘制动画，如果更加了解 requestAnimationFrame，我相信他们将选择后者。
首先我们来对比一段代码

move() {
    let x = 0;
    let x1 = 0;
    setInterval(() => {
        x += 1;
        this.timeoutX = { marginLeft: `${x}px` };
    }, 16.6);
    const animate = () => {
        x1 += 1;
        this.animationX = { marginLeft: `${x1}px` };
        requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
}

动画结果：