JavaScript学习日记 : Day12 - Event Loop

1.为何Event Loop存在?

主要的原因有两个 :

图片来源：Event loop and the rise of Async

1. Event Loop协助了非同步请求的实现，并产生连贯的画面(influent UI)
   

2. Event Loop将"费时较久"或"需等待事件才能启动"的任务往後排，因此能让使用者有流畅的使用者体验(Outstanding UX)
   
   图片来源：搞懂非同步请求 (Asynchronous request)概念

2.Event Loop出现的过程

在javascript诞生之前的浏览器，当使用者打开网页，填写完内容并提交表单进入等待画面，过了30s才传来某个地方资料填写错误的提醒讯息。

js出现後，在前端就能协助用户检查表单填写的内容格式是否正确，不必透过server端处理才回传。

Javascript为何一次只做一件事?

在Google Chrome尚未诞生的1990年代，网路巨擘Netscape为了自家的浏览器，请当时任职的Brendan Eich设计一个「可提供复杂网页互动」的语言原型---就是Javascript。

为了让开发者可以专注在程序开发上，Javascript被设计为「单线程(single threaded runtime)」，一次只执行一小段程序码，而不必烦恼「并发性问题(concurrency issue)」。

为什麽画面停住了?

因为Javascript一次只做一件事，当所render的资料来源为第三方API，在浏览器等待response时，画面就会停在奇怪的读取画面。

因此Event Loop就在这样的情况下因应而生，可以说是附着在浏览器的监听器，用以管控各项任务顺畅执行。

3.Event Loop相关名词解释

Call stack

一个後进先出的执行推叠(call stack)，会依序执行函式 : 从全域(Global Scope)的主程序开始，逐一把各个函式推(push)至执行推叠上方，并从最後进入的函式开始执行，当函式结束後，会将此函式抽离堆叠(pop off)。

Web APIs

浏览器提供了很多不同的API(ex.DOM, AJAX, Timeout)，让我们可以同时处里多项任务。当完成Web APIs的内部函式後(settimeout秒数到)，便将任务传递至工作伫列。

Callback Queue

一个先进先出的工作伫列(call queue)。会接收从Web API来的任务，并透过Event Loop的监控，当Call stack中没有执行项目时，便把伫列中的内容拉近堆叠中。

Event Loop 实例

Philip Roberts 自己写了一个方便视觉化了解 JavaScript Runtime, call stack, event loop, task queue 的工具 Loupe ，你可以把下面摘录自各说明文章的例子，贴到他所提供的网站中执行。

EX1 :

const bar = function() {
    console.log("bar");
};

const baz= function() {
    console.log("baz");
};

function foo() {
    console.log("foo");
    bar();
    baz();
}

foo();

图片来源：A simple example

EX2 :

console.log("Hi")
setTimeout(function cb() {
    console.log("cb1")
},5000)
console.log("Bye")

图片来源：A simple example

参考来源:
并行模型和事件循环
Javascript 的事件循环 (Event Loop)
理解JS中事件循环