js的同步与异步知识点详细整理

我今年大三了，这是我学习js的同步与异步所整理的知识点。如果有错误，还请大家多多指点。

一、基本概念

1、js同步的起源

        JS是单线程语言。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个务。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。这样所导致的问题是∶如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

2、js异步的起源

        为了解决js同步导致页面的渲染不连贯的问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是JS中出现了异步。异步是彼此独立，在等待某事件的过程中，继续做自己的事，不需要等待这一事件完成后再工作。线程是异步实现的一个方式。

注意：异步代码会等同步代码执行完才去执行。

3、常见的同步与异步代码

同步代码：

         满足先定义后执行，如：for，赋值，console.log , if , return … , 函数执行

异步代码：

• 普通事件，如click、resize等
• 资源加载，如load、error等
• 数据交互ajax
• node中的异步API
• 定时器setInterval和setTimeout

二、同步与异步原理

1、队列和栈

队列（Queue）是一种 FIFO(First In, First Out) 的数据结构，它的特点就是先进先出。
栈（Stack） 是一种 LIFO（Last In, First Out）的数据结构，特点即后进先出。

2、调用栈（Call Stack）——同步循环原理

         调用栈里面装是一个个待执行的函数。Event Loop 会一直检查 Call Stack 中是否有函数需要执行，如果有，就从栈顶依次执行。同时，如果执行的过程中发现其他函数，继续入栈然后执行。

案列如下：

<script>
        const bar = () => console.log('bar');
        const baz = () => console.log('baz');
        const foo = () => {
            console.log('foo');
            bar();
            baz();
        }
        foo();
  </script>

3、Event Loop ——异步循环原理

Event Loop 原理是Event Table和Event Queue组成一个循环。

Event Table （ 事件 -> 回调函数）对应表：它就是用来存储 JavaScript 中的异步事件 (request, setTimeout, IO等) 及其对应的回调函数的列表。

Event Queue 回调函数队列：它也叫 Callback Queue，当 Event Table 中的事件被触发，事件对应的回调函数就会被 push 进这个 Event Queue，然后等待被执行。

Event Loop指的就是这一整个圈圈，它不停检查Call Stack中是否有任务（也叫栈帧）需要执行，如果没有，就检查Event Queue，从中弹出一个任务，放入Call Stack 中，如此往复循环。