慢慢补充中，笔者因为最近比较忙，先整理薄弱点，牛客前端课程的听课笔记，仅做分享，方便学习，侵删。如果对你有帮助，希望能够给笔者一个赞鼓励笔者继续分享，感谢！

异步

什么是同步？

函数执行结束立刻有返回值，函数后面的代码需要等待函数有返回值之后才能执行

什么是异步？

函数执行结束需要等待某个条件满足之后才有返回值，函数后面的代码无需等待函数有返回值就能执行

<body>
  <button>点击</button>
  <script>
    // setTimeout 异步方法
    setTimeout(function () {
      console.log(1);
    }, 1000);
    console.log(2);
    // 异步事件
    var btn = document.querySelector("button");
    btn.onclick = function () {
      console.log(3);
    };
    console.log(4);
  </script>
</body>

1. JS中常用的异步操作

定时器 setInterval、setTimeout
事件 onclick
ajax 请求
Promise

2. 引擎如何实现异步

2.1 事件循环

执行 JS 代码的时候，遇到同步任务，直接推入调用栈中执行；遇到异步任务，将该任务挂起，等到异步任务有返回值之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成，将任务队列中的任务按顺序一个个的推入并执行。（执行完所有同步任务才执行异步任务）

2.2 以DOM事件为例

<body>
  <button>点击</button>
  <script>
    // dom事件
    var btn = document.querySelector("button");
    btn.onclick = function () {
      console.log(3);
    };
    console.log(4);
  </script>
</body>

浏览器中的进程？

浏览器进程： 主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
渲染进程： 核心任务是将 html、css 和 js 转换为用户可以与之交互的网页，排版引擎 Blink 和 JS 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签页创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
GPU进程： Chrome 刚开始发布的时候是没有 GPU 进程的，而 Chrome 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 都选择加入 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
网络进程： 主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来成为一个单独的进程。
插件进程： 主要负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

以ajax请求为例

// 客户端
<body>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "demo-data", true);
    xhr.send();
    xhr.onreadystatechange = function (e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
        console.log(2);
      }
    };
    console.log(1);
  </script>

// 服务端
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http
  .createServer(function (req, res) {
    console.log(req.url);
    if (req.url == '/') {
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end(index);
    } else {
      res.writeHead(200, { 'Content-Type': 'text/plain' });
      res.end('hello world');
    }
  })
  .listen(8888);

～浏览器中的进程与线程：www.cnblogs.com/ygunoil/p/1…

前端基础（二）——异步

异步