一直以来都知道 JavaScript 是一门单线程语言, 在笔试过程中不断的遇到一些输出结果的问题, 考量的是对异步编程掌握情况. 一般被问到异步的时候脑子里第一反应就是 Ajax,setTimseout... 这些东西. 在平时做项目过程中, 基本大多数操作都是异步的. JavaScript 异步都是通过回调形式完成的, 开发过程中一直在处理回调, 可能不知不觉中自己就已经处在回调地狱中.
浏览器线程
在开始之前简单的说一下浏览器的线程, 对浏览器的作业有个基础的认识. 之前说过 JavaScript 是单线程作业, 但是并不代表浏览器就是单线程的.
在 JavaScript 引擎中负责解析和执行 JavaScript 代码的线程只有一个. 但是除了这个主进程以外, 还有其他很多辅助线程. 那么诸如 onclick 回调, setTimeout,Ajax 这些都是怎么实现的呢? 即浏览器搞了几个其他线程去辅助 JavaScript 线程的运行.
浏览器有很多线程, 例如:
GUI 渲染线程 - GUI 渲染线程处于挂起状态的, 也就是冻结状态
JavaScript 引擎线程 - 用于解析 JavaScript 代码
定时器触发线程 - 浏览器定时计数器并不是 JS 引擎计数
浏览器事件线程 - 用于解析 BOM 渲染等工作
http 线程 - 主要负责数据请求
EventLoop 轮询处理线程 - 事件被触发时该线程会把事件添加到待处理队列的队尾
等等等
从上面来看可以得出, 浏览器其实也做了很多事情, 远远的没有想象中的那么简单, 上面这些线程中 GUI 渲染线程, JavaScript 引擎线程, 浏览器事件线程是浏览器的常驻线程.
当浏览器开始解析代码的时候, 会根据代码去分配给不同的辅助线程去作业.
进程
进程是指在操作系统中正在运行的一个应用程序
线程
线程是指进程内独立执行某个任务的一个单元. 线程自己基本上不拥有系统资源, 只拥有一点在运行中必不可少的资源(如程序计数器, 一组寄存器和栈).
进程中包含线程, 一个进程中可以有 N 个进程. 我们可以在电脑的任务管理器中查看到正在运行的进程, 可以认为一个进程就是在运行一个程序, 比如用浏览器打开一个网页, 这就是开启了一个进程. 但是比如打开 3 个浏览器, 那么就开启了 3 个进程.
同步 & 异步
既然要了解同步异步当然要简单的说一下同步和异步. 说到同步和异步最有发言权的真的就属 Ajax 了, 为了让例子更加明显没有使用 Ajax 举例.(●ˇˇ●)
同步
同步会逐行执行代码, 会对后续代码造成阻塞, 直至代码接收到预期的结果之后, 才会继续向下执行.
- console.log(1);
- alert("同步");
- console.log(2);
- // 结果:
- // 1
- // 同步
- // 2
异步
如果在函数返回的时候, 调用者还不能够得到预期结果, 而是将来通过一定的手段得到结果(例如回调函数), 这就是异步.
- console.log(1);
- setTimeout(() => {
- alert("异步");
- },0);
- console.log(2);
- // 结果:
- // 1
- // 2
- // 异步
为什么 JavaScript 要采用异步编程
一开始就说过, JavaScript 是一种单线程执行的脚本语言 (这可能是由于历史原因或为了简单而采取的设计). 它的单线程表现在任何一个函数都要从头到尾执行完毕之后, 才会执行另一个函数, 界面的更新, 鼠标事件的处理, 计时器(setTimeout,setInterval 等) 的执行也需要先排队, 后串行执行. 假如有一段 JavaScript 从头到尾执行时间比较长, 那么在执行期间任何 UI 更新都会被阻塞, 界面事件处理也会停止响应. 这种情况下就需要异步编程模式, 目的就是把代码的运行打散或者让 IO 调用 (例如 Ajax) 在后台运行, 让界面更新和事件处理能够及时地运行.
JavaScript 语言的设计者意识到, 这时主线程完全可以不管 IO 设备, 挂起处于等待中的任务, 先运行排在后面的任务. 等到 IO 设备返回了结果, 再回过头, 把挂起的任务继续执行下去.
异步运行机制:
所有同步任务都在主线程上执行, 形成一个执行栈.
主线程之外, 还存在一个任务队列. 只要异步任务有了运行结果, 就在任务队列之中放置一个事件.
一旦执行栈中的所有同步任务执行完毕, 系统就会读取任务队列, 看看里面有哪些事件. 那些对应的异步任务, 于是结束等待状态, 进入执行栈, 开始执行.
主线程不断重复上面的第三步.
举个例子:
- <button onclick="updateSync()">同步</button>
- <button onclick="updateAsync()">异步</button>
- <div id="output"></div>
- <script>
- function updateSync() {
- for (var i = 0; i <1000000; i++) {
- document.getElementById('output').innerhtml = i;
- }
- }
- function updateAsync() {
- var i = 0;
- function updateLater() {
- document.getElementById('output').innerHTML = (i++);
- if (i < 1000000) {
- setTimeout(updateLater, 0);
- }
- }
- updateLater();
- }
- </script>
点击同步按钮会调用 updateSync 的同步函数, 逻辑非常简单, 循环体内每次更新 output 结点的内容为 i. 如果在其他多线程模型下的语言, 你可能会看到界面上以非常快的速度显示从 0 到 999999 后停止. 但是在 JavaScript 中, 你会感觉按钮按下去的时候卡了一下, 然后看到一个最终结果 999999, 而没有中间过程, 这就是因为在 updateSync 函数运行过程中 UI 更新被阻塞, 只有当它结束退出后才会更新 UI. 反之, 当点击异步的时候, 会明显的看到 Dom 在逐步更新的过程.
从上面的例子中可以明显的看出, 异步编程对于 JavaScript 来说是多么多么的重要.
异步编程有什么好处
从编程方式来讲当然是同步编程的方式更为简单, 但是同步有其局限性一是假如是单线程那么一旦遇到阻塞调用, 会造成整个线程阻塞, 导致 CPU 无法得到有效利用, 而浏览器的 JavaScript 执行和浏览器渲染是运行在单线程中, 一旦遇到阻塞调用不仅意味 JavaScript 的执行被阻塞更意味整个浏览器渲染也被阻塞这就导致界面的卡死, 若是多线程则不可避免的要考虑互斥和同步问题, 而互斥和同步带来复杂度也很大, 实际上浏览器下因为同时只能执行一段 JavaScript 代码这意味着不存在互斥问题, 但是同步问题仍然不可避免, 以往回调风格中异步的流程控制 (其实就是同步问题) 也比较复杂. 浏览器端的编程方式也即是 GUI 编程, 其本质就是事件驱动的 (鼠标点击, Http 请求结束等) 异步编程更为自然.
突然有个疑问, 既然如此为什么 JavaScript 没有使用多线程作业呢? 就此就去 Google 了一下 JavaScript 多线程, 在 HTML5 推出之后是提供了多线程只是比较局限. 在使用多线程的时候无法使用 Windows 对象. 若 JavaScript 使用多线程, 在 A 线程中正在操作 DOM, 但是 B 线程中已经把该 DOM 已经删除了(只是简单的小栗子, 可能还有很多问题, 至于这些历史问题无从考究了). 会给编程作业带来很大的负担. 就我而言我想这也就说明了为什么 JavaScript 没有使用多线程的原因吧.
异步与回调
回调到底属于异步么? 会想起刚刚开始学习 JavaScript 的时候常常吧这两个概念混合在一起. 在搞清楚这个问题, 首先要明白什么是回调函数.
百科: 回调函数是一个函数, 它作为参数传递给另一个函数, 并在父函数完成后执行. 回调的特殊之处在于, 出现在 "父类" 之后的函数可以在回调执行之前执行. 另一件需要知道的重要事情是如何正确地传递回调. 这就是我经常忘记正确语法的地方.
通过上面的解释可以得出, 回调函数本质上其实就是一种设计模式, 例如我们熟悉的 jQuery 也只不过是遵循了这个设计原则而已. 在 JavaScript 中, 回调函数具体的定义为: 函数 A 作为参数 (函数引用) 传递到另一个函数 B 中, 并且这个函数 B 执行函数 A. 我们就说函数 A 叫做回调函数. 如果没有名称(函数表达式), 就叫做匿名回调函数.
简单的举个小例子:
- function test (n,fn){
- console.log(n);
- fn && fn(n);
- }
- console.log(1);
- test(2);
- test(3,function(n){
- console.log(n+1)
- });
- console.log(5)
- // 结果
- // 1
- // 2
- // 3
- // 4
- // 5
通过上面的代码输出的结果可以得出回调函数不一定属于异步, 一般同步会阻塞后面的代码, 通过输出结果也就得出了这个结论. 回调函数, 一般在同步情境下是最后执行的, 而在异步情境下有可能不执行, 因为事件没有被触发或者条件不满足.
回调函数应用场景
资源加载: 动态加载 JS 文件后执行回调, 加载 iframe 后执行回调, Ajax 操作回调, 图片加载完成执行回调, Ajax 等等.
DOM 事件及 Node.JS 事件基于回调机制(Node.JS 回调可能会出现多层回调嵌套的问题).
setTimeout 的延迟时间为 0, 这个 hack 经常被用到, settimeout 调用的函数其实就是一个 callback 的体现
链式调用: 链式调用的时候, 在赋值器 (setter) 方法中 (或者本身没有返回值的方法中) 很容易实现链式调用, 而取值器 (getter) 相对来说不好实现链式调用, 因为你需要取值器返回你需要的数据而不是 this 指针, 如果要实现链式方法, 可以用回调函数来实现.
setTimeout,setInterval 的函数调用得到其返回值. 由于两个函数都是异步的, 即: 调用时序和程序的主流程是相对独立的, 所以没有办法在主体里面等待它们的返回值, 它们被打开的时候程序也不会停下来等待, 否则也就失去了 setTimeout 及 setInterval 的意义了, 所以用 return 已经没有意义, 只能使用 callback.callback 的意义在于将 timer 执行的结果通知给代理函数进行及时处理.
JavaScript 中的那些异步操作
JavaScript 既然有很多的辅助线程, 不可能所有的工作都是通过主线程去做, 既然分配给辅助线程去做事情.
XMLHttpRequest
XMLHttpRequest 对象应该不是很陌生的, 主要用于浏览器的数据请求与数据交互. XMLHttpRequest 对象提供两种请求数据的方式, 一种是同步, 一种是异步. 可以通过参数进行配置. 默认为异步.
对于 XMLHttpRequest 这里就不作太多的赘述了.
- var xhr = new XMLHttpRequest();
- xhr.open("GET", url, false); // 同步方式请求
- xhr.open("GET", url, true); // 异步
- xhr.send();
同步 Ajax 请求:
当请求开始发送时, 浏览器事件线程通知主线程, 让 Http 线程发送数据请求, 主线程收到请求之后, 通知 Http 线程发送请求, Http 线程收到主线程通知之后就去请求数据, 等待服务器响应, 过了 N 年之后, 收到请求回来的数据, 返回给主线程数据已经请求完成, 主线程把结果返回给了浏览器事件线程, 去完成后续操作.
异步 Ajax 请求:
当请求开始发送时, 浏览器事件线程通知, 浏览器事件线程通知主线程, 让 Http 线程发送数据请求, 主线程收到请求之后, 通知 Http 线程发送请求, Http 线程收到主线程通知之后就去请求数据, 并通知主线程请求已经发送, 主进程通知浏览器事件线程已经去请求数据, 则
浏览器事件线程, 只需要等待结果, 并不影响其他工作.
setInterval&setTimeout
setInterval 与 setTimeout 同属于异步方法, 其异步是通过回调函数方式实现. 其两者的区别则 setInterval 会连续调用回调函数, 则 setTimeout 会延时调用回调函数只会执行一次.
- setInterval(() => {
- alert(1)
- },2000)
- // 每隔 2s 弹出一次 1
- setTimeout(() => {
- alert(2)
- },2000)
- // 进入页面后 2s 弹出 2, 则不会再次弹出
- requestAnimationFarme
requestAnimationFrame 字面意思就是去请求动画帧, 在没有 API 之前都是基于 setInterval, 与 setInterval 相比, requestAnimationFrame 最大的优势是由系统来决定回调函数的执行时机. 具体一点讲, 如果屏幕刷新率是 60Hz, 那么回调函数就每 16.7ms 被执行一次, 如果刷新率是 75Hz, 那么这个时间间隔就变成了 1000/75=13.3ms, 换句话说就是, requestAnimationFrame 的步伐跟着系统的刷新步伐走. 它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次, 这样就不会引起丢帧现象, 也不会导致动画出现卡顿的问题.
举个小例子:
- var progress = 0;
- // 回调函数
- function render() {
- progress += 1; // 修改图像的位置
- if (progress <100) {
- // 在动画没有结束前, 递归渲染
- Windows.requestAnimationFrame(render);
- }
- }
- // 第一帧渲染
- Windows.requestAnimationFrame(render);
Object.observe - 观察者
Object.observe 是一个提供数据监视的 API, 在 Chrome 中已经可以使用. 是 ECMAScript 7 的一个提案规范, 官方建议的是谨慎使用级别, 但是个人认为这个 API 非常有用, 例如可以对现在流行的 MVVM 框架作一些简化和优化. 虽然标准还没定, 但是标准往往是滞后于实现的, 只要是有用的东西, 肯定会有越来越多的人去使用, 越来越多的引擎会支持, 最终促使标准的生成. 从 observe 字面意思就可以知道, 这玩意儿就是用来做观察者模式之类.
- var obj = {a: 1};
- Object.observe(obj, output);
- obj.b = 2;
- obj.a = 2;
- Object.defineProperties(obj, {a: { enumerable: false}}); // 修改属性设定
- delete obj.b;
- function output(change) {
- console.log(1)
- }
- Promise
Promise 是对异步编程的一种抽象. 它是一个代理对象, 代表一个必须进行异步处理的函数返回的值或抛出的异常. 也就是说 Promise 对象代表了一个异步操作, 可以将异步对象和回调函数脱离开来, 通过 then 方法在这个异步操作上面绑定回调函数.
在 Promise 中最直观的例子就是 Promise.all 统一去请求, 返回结果.
- var p1 = Promise.resolve(3);
- var p2 = 42;
- var p3 = new Promise(function(resolve, reject) {
- setTimeout(resolve, 100, 'foo');
- });
- Promise.all([p1, p2, p3]).then(function(values) {
- console.log(values);
- });
- // expected output: Array [3, 42, "foo"]
- Generator&Async/Await
ES6 的 Generator 却给异步操作又提供了新的思路, 马上就有人给出了如何用 Generator 来更加优雅的处理异步操作. Generator 函数是协程在 ES6 的实现, 最大特点就是可以交出函数的执行权(即暂停执行). 整个 Generator 函数就是一个封装的异步任务, 或者说是异步任务的容器. 异步操作需要暂停的地方, 都用 yield 语句注明. Generator 函数的执行方法如下.
- function * greneratorDome(){
- yield "Hello";
- yield "World";
- return "Ending";
- }
- let grenDome = greneratorDome();
- console.log(grenDome.next());
- // {value: "Hello", done: false}
- console.log(grenDome.next());
- // {value: "World", done: false}
- console.log(grenDome.next());
- // {value: "Ending", done: true}
- console.log(grenDome.next());
- // {value: undefined, done: true}
粗略实现 Generator
- function makeIterator(array) {
- var nextIndex = 0;
- return {
- next: function() {
- return nextIndex < array.length ?
- {value: array[nextIndex++], done: false} :
- {value: undefined, done: true};
- }
- };
- }
- var it = makeIterator(['a', 'b']);
- it.next() // { value: "a", done: false }
- it.next() // { value: "b", done: false }
- it.next() // { value: undefined, done: true }
Async/Await 与 Generator 类似, Async/await 是 JavaScript 编写异步程序的新方法. 以往的异步方法无外乎回调函数和 Promise. 但是 Async/await 建立于 Promise 之上, 个人理解是使用了 Generator 函数做了语法糖. async 函数就是隧道尽头的亮光, 很多人认为它是异步操作的终极解决方案.
- function a(){
- return new Promise((resolve,reject) => {
- console.log("a 函数")
- resolve("a 函数")
- })
- }
- function b (){
- return new Promise((resolve,reject) => {
- console.log("b 函数")
- resolve("b 函数")
- })
- }
- async function dome (){
- let A = await a();
- let B = await b();
- return Promise.resolve([A,B]);
- }
- dome().then((res) => {
- console.log(res);
- });
Node.JS 异步 I/O
当我们发起 IO 请求时, 调用的是各个不同平台的操作系统内部实现的线程池内的线程. 这里的 IO 请求可不仅仅是读写磁盘文件, 在 * nix 中, 将计算机抽象了一层, 磁盘文件, 硬件, 套接字等几乎所有计算机资源都被抽象为文件, 常说的 IO 请求就是抽象后的文件. 完成 Node 整个异步 IO 环节的有事件循环, 观察者, 请求对象.
事件循环机制
单线程就意味着, 所有任务需要排队, 前一个任务结束, 才会执行后一个任务. 如果前一个任务耗时很长, 后一个任务就不得不一直等着. 于是就有一个概念, 任务队列. 如果排队是因为计算量大, CPU 忙不过来, 倒也算了, 但是很多时候 CPU 是闲着的, 因为 IO 设备 (输入输出设备) 很慢(比如 Ajax 操作从网络读取数据), 不得不等着结果出来, 再往下执行.
事件循环是 Node 的自身执行模型, 正是事件循环使得回调函数得以在 Node 中大量的使用. 在进程启动时 Node 会创建一个 while(true)死循环, 这个和 Netty 也是一样的, 每次执行循环体, 都会完成一次 Tick. 每个 Tick 的过程就是查看是否有事件等待被处理. 如果有, 就取出事件及相关的回调函数, 并执行关联的回调函数. 如果不再有事件处理就退出进程.
线程只会做一件事情, 就是从事件队列里面取事件, 执行事件, 再取事件, 再事件. 当消息队列为空时, 就会等待直到消息队列变成非空. 而且主线程只有在将当前的消息执行完成后, 才会去取下一个消息. 这种机制就叫做事件循环机制, 取一个消息并执行的过程叫做一次循环.
- while(true) {
- var message = queue.get();
- execute(message);
- }
我们可以把整个事件循环想象成一个事件队列, 在进入事件队列时开始对事件进行弹出操作, 直至事件为 0 为止.
process.nextTick
process.nextTick()方法可以在当前 "执行栈" 的尾部 -->下一次 Event Loop(主线程读取 "任务队列")之前 -->触发 process 指定的回调函数. 也就是说, 它指定的任务总是发生在所有异步任务之前, 当前主线程的末尾.(nextTick 虽然也会异步执行, 但是不会给其他 io 事件执行的任何机会);
- process.nextTick(function A() {
- console.log(1);
- process.nextTick(function B(){console.log(2);});
- });
- setTimeout(function C() {
- console.log(3');
- }, 0);
- // 1
- // 2
- // 3
异步过程的构成要素
异步函数实际上很快就调用完成了, 但是后面还有工作线程执行异步任务, 通知主线程, 主线程调用回调函数等很多步骤. 我们把整个过程叫做异步过程, 异步函数的调用在整个异步过程中只是一小部分.
一个异步过程的整个过程: 主线程发一起一个异步请求, 相应的工作线程接收请求并告知主线程已收到通知(异步函数返回); 主线程可以继续执行后面的代码, 同时工作线程执行异步任务; 工作线程完成工作后, 通知主线程; 主线程收到通知后, 执行一定的动作(调用回调函数).
它可以叫做异步过程的发起函数, 或者叫做异步任务注册函数. args 是这个函数需要的参数, callbackFn(回调函数)也是这个函数的参数, 但是它比较特殊所以单独列出来. 所以, 从主线程的角度看, 一个异步过程包括下面两个要素:
发起函数;
回调函数 callbackFn
它们都是主线程上调用的, 其中注册函数用来发起异步过程, 回调函数用来处理结果.
举个具体的栗子:
setTimeout(function,1000);
其中 setTimeout 就是异步过程的发起函数, function 是回调函数.
注: 前面说得形式 A(args...,callbackFn)只是一种抽象的表示, 并不代表回调函数一定要作为发起函数的参数, 例如:
- var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = xxx;
- xhr.open('GET', url);
- xhr.send();
总结
JavaScript 的异步编程模式不仅是一种趋势, 而且是一种必要, 因此作为 HTML5 开发者是非常有必要掌握的. 采用第三方的异步编程库和异步同步化的方法, 会让代码结构相对简洁, 便于维护, 推荐开发人员掌握一二, 提高团队开发效率.
来源: https://segmentfault.com/a/1190000019253700