[Day15] JavaScript - 同步(Synchronous) 与 非同步 (Asynchronous)

JS需要JavaScript 引擎才能执行

JavaScript 是一个直译式语言，而直译语言无法独立执行，必须仰赖一个能够编译及执行的环境(即JavaScript 引擎)，最有名的 JavaScript 引擎就是 Google 所开发的 V8 引擎，被用在 Chrome 浏览器还有 Node.js 上，所以我们可以说浏览器及Node.js是JavaScript的执行环境。

同步与非同步

而刚刚提到的JavaScript 引擎，是使用单执行绪 (Single thread) 来执行 JavaScript 的，也就是一次只能做一件事，若有很多件事要做，就会让这些事情排队，并逐一执行。所以在执行 JavaScript 的时候，是属於同步执行的(一步一步执行，这步还没执行完的话不会到下一步执行)。

同步

光从字面上来看"同步"与"非同步"会容易误会他们的意思，同步听起来很像同时做很多件事，但其实是相反的，同步在这里的含意是一次只做一件事情，直到这件事做完才会继续做下一件事。
可以把它想成是在接收讯息时，会立刻（或尽可能接近立刻）执行的即时通讯(如电话：在电话通讯时，你通常会立刻回覆对方的讯息)。

由於同步的特性是一件事做完才接着做下一件事，所以当 JavaScript 在浏览器同步执行耗时的函数时，除了会阻塞 (block) 後面函数的执行外，还会阻塞整个网页的画面，让整个网页的画面动弹不得。

非同步

非同步的概念则是相反，是同时可以做很多件事情，不需要等到前一件事情做完才做下一件事情。
也可以把非同步想成是两方或多方之间交换消息的方法，其中每一方在方便或可能的时候才接收并处理讯息，而不是立刻这麽做的通讯环境。(如电子邮件:收件者会在方便时才回覆，他们不用马上回覆)

前面提到JavaScript是单执行绪，那为什麽还可以处理非同步事件呢?
这是因为浏览器提供了很多WebAPI如setTimeout、DOM、AJAX、HTTP request，这些不存在V8引擎中，是浏览器提供的资源。

JavaScript 在执行的时候是依照同步的概念去执行的，当 JavaScript 引擎中的 Call Stack 发现执行到非同步函数时，会将该非同步函数的触发事件交给浏览器处理，当该非同步函数的执行条件被触发时时，再将非同步函数的 callback function 放到一个叫做 Callback Queue 的资料结构中。
浏览器中的 event loop 则会不断监听 Call Stack 中是否有还没执行完的函数，一旦 Call Stack 中为空，event loop 就会将 Callback Queue 里的第一个 callback function 放到 Call Stack 中执行。

所以在浏览器内，只有 Javascript 引擎本身是同步的，而 Javascript 引擎可以跟 WebAPI 沟通，达到非同步的事件处理。

参考来源:
https://www.oxxostudio.tw/articles/201706/javascript-promise-settimeout.html
https://jimmyswebnote.com/javascript-sync-async/