JS执行机制（同步、异步）

目的：

• 了解JS执行机制
• 熟练掌握异步和同步的定义与区别

1. JS执行机制

• JS 语言的最大特点就是 单线程，即 同一时间只能做同一件事。
• 原因：
  • 由于 JS 是处理不同用户的交互，以及操作 DOM 而诞生的。例如对某一个元素进行添加，删除操作，就不能同时进行。应该先添加，再删除。

单线程 就好比 有人请你吃饭，你先干完你的事情之后，再去吃饭。如果你的事情没有做完，吃饭就一直等着。
这样导致的问题是：如果 JS 执行的时间过长，那么就不能同时进行下一个事情，造成页面渲染不连贯，导致页面渲染加载阻塞

2. 同步任务

为了解决 如果前面的事情耗时，后面的任务不得不进行等待的问题，那么就利用 HTML5 提出的 Web Worker 标准，允许 JS 脚本 创建多个线程，但是子线程完全受到主线程控制。于是，就出现了 同步任务 和 异步任务。

同步任务 在主线程上排队执行的任务形成执行栈。只有前一个任务执行完毕，才能执行后一个任务

举例：

1. 函数1调用函数2，当函数2执行完成后，才执行函数1里面的内容。
2. 普通B/S模式：
   提交 -> 等待服务器处理 -> 处理完毕返回，这个期间客户短浏览器不能做任何操作

3. 异步任务

异步任务 不进入主线程，而进入‘任务队列’的任务，当主线程的任务运行结束，才会从“任务队列”取出异步任务放入主线程执行。

举例：

1. 函数1在调用函数2的同时，函数1也在执行他自己的操作。
2. Ajax请求
   请求事件触发 -> 服务器处理（此时客户端浏览器可以做其他操作） ->处理完毕

4. 区别

同步任务 和 异步任务 的本质区别是：流水线上各个流程的执行顺序不同

同步	异步
同步任务都在主线程上执行，形成一个执行栈	JS的异步使用过函数的回调实现的。异步任务相关函数添加到任务队列中，任务队列也称为消息队列

补充：

• 一般情况下，异步任务有以下三种类型

1. 普通事件。 如：click、resize 等
2. 资源加载。 如：load、error 等
3. 定时器。 如：setTimeout、setInterval 等
4. Ajax （网络模块）

5. JS 执行机制(事件循环)

1. 先执行执行栈中的同步任务
2. 异步任务放入了任务队列中
3. 一旦执行栈中的所有任务执行完毕，系统就会按次序读取 任务队列 中的 异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

由于 主线程不断的重复获得任务、执行任务、再获取任务、再执行，就实现了事件循环（event loop）。