异步的JavaScript

panel 2年前
   <h2>引子</h2>    <p>前几天学校的交流群里面讨论JavaScript回调函数,有个同学提出了一个观点:回调函数就是异步执行的!</p>    <p>看到这个观点,我想了想我使用回调函数的场景,还真都是异步的,一时竟觉得他说得很有道理。</p>    <p>当然,这句话本身,当然是 <strong>错的</strong> ,在JavaScript中函数作为一等公民,可以在任何地方定义,在函数内或函数外,可以作为函数的参数和返回值,基于这个基本事实,就可以写出高阶函数。</p>    <p>接受或者返回一个函数的函数称为高阶函数</p>    <p>常用的内置高阶函数例如Array对象的forEach,map等, <a href="/misc/goto?guid=4959756033772753213" rel="nofollow,noindex">函数组合</a> , <a href="/misc/goto?guid=4959756033873016896" rel="nofollow,noindex">函数柯里化</a> ,回调模式都属于高阶函数。实际上,JavaScript是有能力进行函数式编程的( <a href="/misc/goto?guid=4959756033958041580" rel="nofollow,noindex">FED关于函数式编程的文章</a> ),这里就不深入讨论了。</p>    <p>有点扯远了,回到刚刚那个同学观点,和明显,用forEach遍历一下数组,并不是异步的,那么为什么提到回调函数的时候,很容易和异步联系起来呢?这个问题引起了我的思考,回调和异步到底有什么样的渊源呢?</p>    <h2>单线程的JavaScript</h2>    <p>说起异步,就要先说说JavaScript运行机制。我们知道,JavaScript是单线程执行的,意味着同一个时间点,只有一个任务在运行。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。</p>    <p>从诞生起,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。</p>    <h2>为什么需要异步?</h2>    <p>单线程的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。</p>    <p>为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。</p>    <p>关于异步处理,现在已经有了许多好的解决方案。如果想全面了解如何处理异步,@肖鸡已经写了一篇非常全面的文章JS中异步的解决方案。</p>    <h2>JavaScript执行机制</h2>    <p>在谈异步之前,先来说说JavaScript的执行机制,看下面这段代码</p>    <pre>  function foo () {      return foo();  }  foo();    // Uncaught RangeError: Maximum call stack size exceeded</pre>    <p>这代码里面抛出了一个错误,意思是超过最大调用堆栈大小,那么这个call stack是什么呢?</p>    <p>call stack:执行JavaScript的主线程分为heap和stack,stack是一个执行环境上下文。</p>    <p><a href="/misc/goto?guid=4959756034044018060" rel="nofollow,noindex">stack</a> 是一种数据结构,数据先入后出,后入先出。执行JavaScript的call stack,也是如此。</p>    <p><img src="https://simg.open-open.com/show/cd88ce56e8b6dd41577b3a19e3c26815.png"></p>    <p>从上图的例子可以看出调用栈的变化</p>    <p>main(js文件可以视作一个main函数) -> printSquare(内部调用了square,因此需要把square推入栈中) -> square(内部调用了multiply,推入栈中) -> multiply</p>    <p>此时所依赖的函数都在栈中,那么可以执行了,执行顺序和栈是一致的,后入先出(执行),所以顺序为</p>    <p>multiply -> square -> printSquare。</p>    <p>call stack也是有最大限制的,可以使用下面的代码测试一下浏览器的最大call stack size</p>    <pre>  var i = 0;  function inc() {      i++;      inc();  }  inc();  //VM202:2 Uncaught RangeError: Maximum call stack size exceeded  i // 15720</pre>    <p>理解JavaScript的函数调用方式,对于理解递归,高阶函数,异步函数等都是非常有帮助的。</p>    <p>以递归为例,递归函数不断调用自身,那么就会不断向call stack中推入函数,直到达到递归条件(此时函数不再调用自身),然后再按后进先出的原则依次执行stack中的函数。</p>    <h2>异步的实现</h2>    <p>异步的实现我分为三部分来理解:webApi,任务队列,event loop</p>    <h3>webApi</h3>    <p>先来列举一下JavaScript中的异步任务,现在先限定在浏览器中,可以得出以下结果:</p>    <ol>     <li> <p>dom事件</p> </li>     <li> <p>定时器setTimeout,setInterval</p> </li>     <li> <p>XMLHttpRequest</p> </li>    </ol>    <p>可以发现,这些都是都是浏览器的一些api,也就是webApi。其实异步的实现是浏览器来处理的,主线程并不用管异步时如何实现的。</p>    <p>事实上,浏览器是多进程的,所以可以开多个线程来处理异步行为,并在任务完成时同步到任务队列</p>    <h3>任务队列</h3>    <p>看下面这段代码,setTimeout指定的函数0ms后输出,但是最后才执行</p>    <pre>  console.log(1);  setTimeout(() => {console.log('after 0ms')} ,0);  console.log(2);  console.log(3);    // 1  // 2  // 3  // after 0ms</pre>    <p>因为setTimeout的函数经过webApi,0ms后定时器执行并将回调函数放到task queue,当call stack中的代码执行完毕时,主进程不断查看task queue中的任务,如果有任务就取出并放到call stack中执行。</p>    <p>setTimeout的定时是不准确的,因为当前call stack执行任务时,定时器的回调就会一直在task queue中等待</p>    <p><img src="https://simg.open-open.com/show/3827d59fb8ad7a2513b703a5020a321c.png"></p>    <p>对于其他的异步api,如dom事件,ajax请求等,都是同样的原理,当异步事件执行完毕,就会把相应的回调函数放到task queue中。</p>    <p>task queue中的任务需要反复轮询,查看是否有任务已完成,这个轮询就是event loop</p>    <h3>Event loop</h3>    <p>event loop经常用类似如下的方式来实现</p>    <pre>  while (queue.waitForMessage()) {    queue.processNextMessage();  }</pre>    <p>如果当前没有任何消息queue.waitForMessage 会等待同步消息到达。</p>    <h2>异步和回调的关系</h2>    <p>说到现在,异步和回调的关系已经很明确了。</p>    <p>异步:通过webApi创建异步任务。任务完成时,如果有指定了回调函数,将回调函数放入task queue中;如果没有指定回调函数,这个事件就被丢弃。</p>    <p>回调函数:定义了异步任务完成时所要执行的操作,包括事件和定时器所指定的异步任务。</p>    <h2>避免同步阻塞的代码</h2>    <p>像深度循环,同步的ajax请求等任务会非常耗时,主线程有代码执行时,task queue中的代码就会一直处于等待状态,此时浏览器无法进行任何交互和操作,页面就相当于挂掉了。</p>    <h2>nodeJS中的异步</h2>    <p>node作为一个事件驱动,无阻塞IO的运行时,也是使用了事件循环。但是node和浏览器的实现有很多不同,下次可以再水一篇node文章(逃</p>    <p> </p>    <p>来自:https://webfe.kujiale.com/yi-bu-de-javascript/</p>    <p> </p>