darjun
darjun

深入理解Javascript之Callstack&EventLoop

  • 1.概述
  • 2.调用栈
  • 3.事件循环
  • 4.微任务队列
  • 5.总结
  • 6.参考链接

1.概述

众所周知，Javascript是一个单线程的语言。这意味着，在Javascript中，同一时间只能做一件事情。

这样的设计有一些优点，例如简单，避免了多线程中复杂的状态同步，写程序时不用考虑并发访问。但同时也带来了一些其他问题，其中比较突出的一个问题是：代码逻辑不直观。由于Javascript是单线程的，其中只有一个执行序列。所以，在执行异步操作（例如定时，网络请求这些不能立即完成的操作）时，Javascript运行时不可能在那里等着操作完成。否则整个运行时都被阻塞在那里了，导致其他所有的操作都无法进行，例如网页渲染，用户点击、滚动页面等操作。这样的用户体验是非常糟糕的。

正因为如此，Javascript使用回调函数处理异步操作结果。进行异步操作时传入一个回调，操作完成之后由Javascript引擎执行这个回调，将结果传入。慢慢地，Javascript中充斥着大量的回调。过多的使用回调让一段完整的逻辑被拆分成了很多片段，非常不利于阅读与维护。回调过多的问题在NodeJS中更为突出，故而出现了Promise（见我的前一篇博客）和async/await。

那么异步操作完成时，Javascript运行时是怎样感知到并调用对应的回调函数的呢？

答案是EventLoop（事件循环）。

要了解EventLoop是怎样运作的，我们首先需要了解Javascript是怎样处理一个个任务，调用一个个函数的。这就是CallStack（调用栈）所做的事。

2.调用栈

相信有过其他语言编程经验的读者都听说过CallStack的概念。Javascript中的CallStack类似。

CallStack是一个栈结构，栈的特点是LIFO（后入先出），出栈入栈只会在一端（也就是栈顶）进行。

CallStack是用来处理函数调用与返回的。每次调用一个函数，Javascript运行时会生成一个新的调用结构压入CallStack。而函数调用结束返回时，JavaScript运行时会将栈顶的调用结构弹出。由于栈的LIFO特性，每次弹出的必然是最新调用的那个函数的结构。

Javascript启动时，从文件或标准输入加载程序。加载完成时，Javascript运行时会生成一个匿名的函数，函数体就是输入的代码。这个函数就有点类似于C/C++中的main()函数，是我们的入口函数。我们姑且称之为

函数。Javascript启动时，首先调用就是
函数。看下面代码：

function func1() {
    console.log('in function1');
}

function func2() {
    func1();
    console.log('in function2');
}

function func3() {
    func2();
    console.log('in function3');
}

func3();

上面代码很好理解，我们来看看Javascript是如何运行这段代码的。

Javascript首先加载代码，创建一个匿名

包裹这段代码并调用该函数。
函数执行，依次定义函数func1、func2、func3，然后调用函数func3。为func3创建调用结构并压栈。函数func3中调用func2，为func2创建调用结构并压栈。函数func2中调用func1，为func1创建调用结构并压栈。这个过程中，CallStack的变化如下。

callstack-push.png

然后，函数func1执行完成，从栈顶弹出调用结构。然后func2继续执行，func2执行完成后从栈顶弹出其调用结构。然后func3继续执行，func3执行完成后从栈顶弹出其调用结构。这个过程中，CallStack的变化如下。

callstack-pop.png

当然，我这里有一个地方不太严谨。不知道读者有没有注意到，console.log也是函数函数哦。所以在func1中调用console.log时，CallStack上也会有对应的调用堆栈。func2，func3中的console.log调用同样如此。有兴趣的话，可以自己画一画完整的调用流程，这样可以加深理解。

这里我推荐大家使用Google Chrome的开发者工具来帮助我们理解CallStack。下图是上面代码在开发者工具中的一步步执行的结果：

callstack-demo.gif

  • Chrome中

    称为。

  • 单步执行时，重点观察右侧工具栏中Call Stack一栏的变化。

在CallStack中执行的函数，我们称之为一个task（任务）。

接下来，我们来思考这样一个问题：setTimeout、setInterval、AJAX请求这些功能是怎么实现的？

一位牛人Philip Roberts曾经将V8引擎（Chrome内置的Javascript引擎）源码下载下来，然后用grep查找，发现源码中并没有实现这些函数的代码。

那么这些函数到底是如何实现的，又是如何与Javascript引擎交互的呢？

答案是：宿主（网页中指的是浏览器，Node中指的是Node引擎）提供实现，并在操作完成时将结果（异步的，会有延迟）放入Javascript引擎的task队列，由Javascript引擎处理。

3.事件循环

EventLoop顾名思义，其实就是Javascript引擎中的一个循环，它就是一个不停地从任务队列（task queue）中取出任务执行的过程。

我们前面详细了解了CallStack以及Javascript启动时是如何处理的。但是

退出后，Javascript引擎就没事做了吗？当然不是，有很多任务会不定时的触发需要Javascript引擎去处理。例如，用户点击按钮，定时器，页面渲染等。

其实，Javascript引擎中维护着一个任务队列。当CallStack中没有任务在执行时，引擎会从任务队列中取出任务压入CallStack处理。我们通过代码来具体看看（引用jesstelford）：

setTimeout(() => {
    console.log('hi');
}, 1000);

我们的Js代码，call stack，task queue和Web APIs（浏览器中实现）关系如下：

        [code]        |   [call stack]    | [task queue] | |    [Web APIs] |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   |              | |               |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

开始时，代码未执行，所有都是空的。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | 
            |              | |               |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

开始执行代码，压入我们的

函数。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
> setTimeout(() => {  | 
            |              | |               |
    console.log('hi') | setTimeout        |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

执行第一行代码，调用函数setTimeout。我们前面说过，每个函数调用都会创建一个新的调用记录压到栈上。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | 
            |              | | timeout, 1000 |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

setTimeout执行完成，从栈中移除对应调用记录。Web APIs记录超时和回调，超时机制由浏览器实现。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   |              | | timeout, 1000 |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

代码中没有其他逻辑，

函数结束，从栈移除调用信息。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   | function   <-----timeout, 1000 |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

超时时间到了，Web APIs将回调放入task queue中。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | function        <---function     | |               |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

EventLoop检测到Javascript没有任务处理，从task queue中取出任务执行。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | function          |              | |               |
>   console.log('hi') | console.log       |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

执行该回调函数，回调函数中又调用了console.log函数。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | function          |              | |               |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |
> hi

console.log执行完成，输出"hi"。

        [code]        |   [call stack]    | [task queue] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   |              | |               |
    console.log('hi') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |
> hi

回调函数执行完成，CallStack再次为空。

上面就是setTimeout的执行过程，从中开始看出EventLoop在幕后做的工作。

下面我们再来看一段代码：

console.log("start");

setTimeout(() => {
    console.log("timeout");
}, 0);

Promise.resolve()
  .then(() => {
      console.log("promise1");
  })
  .then(() => {
      console.log("promise2");
  });

console.log("end");

这段程序的输出是什么？建议大家先思考一下，最好能动笔画一画图。

4.微任务队列

接着上一节的代码，符合标准（很多旧版本的浏览器实现都是不符合标准的，具体参见参考链接）的输出应该是：

start
end
promise1
promise2
timeout

但是，为？什？么？

实际上，Javascript中有另外一种队列。Promise的回调是被放入这个队列的。这个队列叫做microtask queue（微任务队列），ES6标准中叫Job Queue。microTask的优先级是比task高的，也就是说microtask队列中的任务要先处理。

  • EventLoop检测到当前没有任务在执行，首先检查microtask队列中有没有需要处理的任务。如果有那么一个个执行，直到microtask队列为空。

  • microtask队列中没有任务了，执行task队列中的任务。这里需要注意，**每执行一个task队列中的任务，就检查一下microtask队列状态。将microtask队列中所有任务都执行完成之后，再从task队列中取出任务执行。

下面我们看看上面那段代码是怎么一步步执行的：

（为方便起见我们称setTimeout回调为timeoutcb，称第一个then成功回调为promisecb1，第二个then回调为promisecb2）

        [code]                    |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  --------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");        |                   |              | |                   | |               |
  2.                              |                   |              | |                   | |               |
  3. setTimeout(() => {           |                   |              | |                   | |               |
  4.     console.log("timeout");  |                   |              | |                   | |               |
  5. }, 0);                       |                   |              | |                   | |               |
  6.                              |                   |              | |                   | |               |
  7. Promise.resolve()            |                   |              | |                   | |               |
  8. .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1"); |                   |              | |                   | |               |
  10.})                           |                   |              | |                   | |               |
  11..then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2"); |                   |              | |                   | |               |
  13.});                          |                   |              | |                   | |               |
  14.                             |                   |              | |                   | |               |
  15.console.log("end");          |                   |              | |                   | |               |

开始时，call stack、task queue、microtask queue都为空。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
> 1. console.log("start");         |     
        |              | |                   | |               |
  2.                               |     console.log   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |

程序开始运行，压入

函数。首先执行第一行代码，console.log("start")，将console.log压栈。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
> 1. console.log("start");         |     
        |              | |                   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start

console.log执行完成，输出"start"。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    
         |              | |                   | |               |
  2.                               |    setTimeout     |              | |                   | |               |
> 3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start

第二行为空跳过，开始执行第三行代码，setTimeout压栈。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    
         |   timeoutcb <------------------------~~timeoutcb, 0~~|
  2.                               |                   |              | |                   | |               |
> 3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start

setTimeout执行完成，由于超时是0，所以立即回调立即进入task queue中。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    
         |  timeoutcb   | |     promisecb1    | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
> 7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start

代码执行到第7行：

  • 首先Promise.resolve压栈，执行完成后返回一个Promise对象。

  • 然后调用该对象的then方法，该方法压栈，执行完成后返回一个全新的Promise对象，我们称该对象为promise1。由于Promise.resolve返回对象的状态为resolved，所以promise1回调直接进入microtask队列。

  • 接着又执行新对象的then方法，我们称该对象为promise2。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    
         |    timeout   | |     promisecb1    | |               |
  2.                               |    console.log    |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
> 15. console.log("end");          |                   |              | |                   | |               |
> start

代码执行到第15行，console.log压栈。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    
         |    timeout   | |     promisecb1    | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
> 15. console.log("end");          |                   |              | |                   | |               |
> start
> end

console.log("end")执行完成，输出"end"，出栈。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |                   |    timeout   | |     promisecb1    | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
> 15. console.log("end");          |                   |              | |                   | |               |
> start
> end

函数没有逻辑需要执行了，出栈。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    promisecb1     |    timeout   | |                   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
> 15. console.log("end");          |                   |              | |                   | |               |
> start
> end

EventLoop检查到microtask队列中有任务需要执行，将promisecb1取出压入call stack。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |                   |    timeout   | |      promisecb2   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start
> end
> promise1

promisecb1执行完成，输出"promise1"，并且返回undefined。（其实在这里还有一个console.log压栈出栈的过程，我就不画了，下同）

在深入理解Javascript之Promise中看到，如果返回一个值，那么对象立刻变为resolved。所以第二个then的回调需要安排执行，进入microtask队列。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |     promisecb2    |    timeout   | |                   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start
> end
> promise1

EventLoop检测到call stack中没有正在执行的任务，同时microtask队列不为空。从microtask队列取出任务压入call stack。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |                   |    timeout   | |                   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start
> end
> promise1
> promise2

promisecb2执行完成，输出"promise2"。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |    timeoutcb      |              | |                   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start
> end
> promise1
> promise2

接着,EventLoop检测到call stack和microtask队列都为空，从task队列中取出timeoutcb压入栈。

        [code]                     |   [call stack]    | [task queue] | | [microtask queue] | |   [Web APIs]  |
  ---------------------------------|-------------------|--------------| |-------------------| |---------------|
  1. console.log("start");         |                   |              | |                   | |               |
  2.                               |                   |              | |                   | |               |
  3. setTimeout(() => {            |                   |              | |                   | |               |
  4.     console.log("timeout");   |                   |              | |                   | |               |
  5. }, 0);                        |                   |              | |                   | |               |
  6.                               |                   |              | |                   | |               |
  7. Promise.resolve()             |                   |              | |                   | |               |
  8.  .then(() => {                |                   |              | |                   | |               |
  9.     console.log("promise1");  |                   |              | |                   | |               |
  10. })                           |                   |              | |                   | |               |
  11. .then(() => {                |                   |              | |                   | |               |
  12.    console.log("promise2");  |                   |              | |                   | |               |
  13. });                          |                   |              | |                   | |               |
  14.                              |                   |              | |                   | |               |
  15. console.log("end");          |                   |              | |                   | |               |
> start
> end
> promise1
> promise2
> timeout

timeoutcb执行完成，输出"timeout"。

5.总结

通过这篇文章，我们了解到Javascript时如何通过call stack来处理函数的调用与返回的。setTimeout等异步机制其实是宿主提供实现，并在异步操作完成负责将回调放入任务队列，最后由EventLoop在适合的时机取出压入call stack实际执行。

我们还看到了另外一种队列——microtask队列。该队列中存放的一般是优先级较高的任务，例如Promise的回调处理函数。

每当call stack中没有正在执行的任务时，EventLoop会优先从microtask队列中取出任务执行，当该队列为空时才会从task队列取。

在使用一门框架或语言时，对于是否需要了解底层运作机制和原理，往往会有比较大的争论。有人说，我不了解内部原理同样可以写出好程序，那为什么还需要花时间去研究呢？
对此，我觉得了解底层原理还是非常有必要的。有下面几个好处：

  • 可以让我们看到全貌，了解整个系统是如何运作的。

  • 底层原理大多是相通的，例如几乎所有语言的函数调用底层都是利用CallStack来实现的。学会了Javascript的CallStack运作机制，在学习其他语言的相关概念时往往能事半功倍。

  • 了解底层可以让我们心中有数，明白什么事情能做，什么事情不能做。例如Javascript是单线程的，我们写代码时一定不能让线程阻塞了。

  • 了解底层可以让我们更好的优化代码。当程序性能出现瓶颈时，可以更快地定位问题。

6.参考链接

  1. Philip Roberts在欧洲JSConf上的演讲（必看）
  2. What is the JS Event Loop and Call Stack? — Jess Telford
  3. Tasks, microtasks, queues and schedules
  4. Understanding the JavaScript call stack

关于我：
个人主页 掘金

你可能感兴趣的:(深入理解Javascript之Callstack&EventLoop)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
  • 《大清方方案》| 第二话 谁佐清欢
    和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
  • 《庄子.达生9》 钱江潮369
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 东南林氏之九牧林候选父系 祖缘树TheYtree
    渊源介绍东晋初年晋安林始祖林禄公入闽，传十世隋右丞林茂，由晋安迁居莆田北螺村。又五世而至林万宠，唐开元间任高平太守，生三子：韬、披、昌。韬公之孙攒，唐德宗立双阙以旌表其孝，时号"阙下林家"。昌公字茂吉，乃万宠公第三子，官兵部司马，配宋氏，生一子名萍。萍于唐贞元间明经及第，官沣洲司马(后追赠中宪大夫)。唐太和年间归隐后，迁居仙游游洋，世称“游洋林”；其后裔居游洋后迁移漳州漳浦路下，由路下林第四房平和
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 大伟说成语之唉声叹气 求索大伟
    ＊大伟说成语＊【唉声叹气】叹气：因心里不痛快或不如意而吐出长气，发出声音。因为痛苦、憋闷或感伤而发出叹息的声音。【大伟说】情绪外露，非人类所特有，动物亦有情绪，悲哀和欢乐所表示的情绪亦是不一样的，会嗷嗷大叫也会低吟痛哭。不同的是，人类的情绪更复杂，更多样，更丰富。唉声叹气，可以说是最基础的情绪，因为无奈而举足无措，不知该如何如何化解，只有独自一人慢慢承受，长吁短叹不知如何是好，其实是无能无力的表现
  • libyuv之linux编译 jaronho Linuxlinux运维服务器
    文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 怎么做淘客赚钱(2022最新免费淘客盈利的方法) 高省_飞智666600
    很多人都不知道什么是淘宝客，今天小编为大家解答一下吧。淘宝客，现在简称淘客，是时下比较流行的一个词语，特质为淘宝店推广商品获取提成的人，这些人没有自己的产品，只是在淘宝里面选择适合自己的产品，在自己比较熟悉的领域推广，把产品卖出去之后，会从淘宝店家那里获得百分之五到百分之五十左右的佣金。淘宝客付出的是什么呢？时间。你需要花时间去选适合自己推广的产品，需要花时间去选自己的推广方法，如果你打算自己做个
  • Python爬虫解析工具之xpath使用详解 eqa11 python爬虫开发语言
    文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
  • 锁之缘 尘缘诗词原创作品
    是谁追寻梦的足迹，是谁在偷偷的哭泣，日月隔离在黑白天地情感在心中蔓延的痕迹天与地的距离有多远流失的星晨落入哪片空间不要让泪水模糊双眼心牢中一样充满温暖谁说爱情没有永远白娘子又为何爱许仙蝴蝶墓地展翅翩翩轻歌慢舞袖卷人间传奇千古留爱万年…………月落星飞徘徊是选择不去问自已为合舍不得寂寞本就是痛苦的不在追寻梦中的痕迹才不会失去真实的自已
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • ARM驱动学习之5 LEDS驱动 JT灬新一 嵌入式C底层arm开发学习单片机
    ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
  • ARM驱动学习之4小结 JT灬新一 嵌入式C++arm开发学习linux
    ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
  • C++ | Leetcode C++题解之第409题最长回文串 Ddddddd_158 经验分享C++Leetcode题解
    题目：题解：classSolution{public:intlongestPalindrome(strings){unordered_mapcount;intans=0;for(charc:s)++count[c];for(autop:count){intv=p.second;ans+=v/2*2;if(v%2==1andans%2==0)++ans;}returnans;}};
  • 2020-12-24 我和我的天使们
    阅读《老子的心事》391—403“将欲取之，必固与之”：想要得到什么，首先就要送出什么。我常常对孩子们说，你希望别人怎样对你你就怎样对待别人。想要得到别人的尊重，首先要尊重别人。我希望她们可以不迟到，因为不迟到是对别人的尊重，我就自己就先做到不迟到。哪怕是约朋友逛街，我尽量准时赴约。我严格要求孩子们，也同样严格要求自己，我跟孩子们一起把好的品格变成习惯。“是谓微明”：这就是微妙的智慧。看起来很少很
  • 18、架构-可观测性之聚合度量 大树~~ 架构javapython后端架构
    聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标
  • 学习“论语”-第59天 春峰轩
    12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
  • 2021-11-15 宙火
    我给宋小姐写了首诗，是我在课上因思恋宋小姐而写的。“自古多情是唐宋，从来双飞归巢燕。邻家小女相聘婷，常使春意荡漾我。不知单思可为爱，惟愿一心付之汝。”我拿给宋小姐看了，她说我写得很棒。我很开心，但又不是那么开心。宋小姐是回复我了，但也只是说我写得很棒，对我诗句中蕴藏的真切感情，不知道是真的没发现，还是装作没发现。但我不深究，只是这样，我就很开心了。我答应宋小姐，一天给她写一首诗。
  • 《我的青葱岁月之缘来是你》 第二章 迎新晚会 思源思缘思怨
    “怎么你也来了这里？”我愉快的问到，想着这是上天给的缘分吗？我还没去找他竟然就相遇了。那个让我开心的老乡。“你好，我也是舞蹈社的新人啊！”他说，笑起来回答我，眼睛弯弯的。“这么巧，我叫吴倩，你叫啥？”“我叫韩欢，你也是B市人吧，c中毕业的？”“我不是，我是f中的，不然肯定会认识你的”“是吗？以后多多关照了”他还冲我眨了眨眼睛。内心一阵悸动，这是……回到寝室，我兴奋的告诉我的室友这个事情，我再次觉得
  • 数据结构之哈希表 X同学的开始 数据结构数据结构散列表
    哈希表(散列表)出现的原因在顺序表中查找时，需要从表头开始，依次遍历比较a[i]与key的值是否相等，直到相等才返回索引i；在有序表中查找时，我们经常使用的是二分查找，通过比较key与a[i]的大小来折半查找，直到相等时才返回索引i。最终通过索引找到我们要找的元素。但是，这两种方法的效率都依赖于查找中比较的次数。我们有一种想法，能不能不经过比较，而是直接通过关键字key一次得到所要的结果呢？这时，
  • 厦门自由行之第一天: 大苏子在广漂
    厦门三人行之杂记出发前一天:12️28日下午15:00从广州粗发，来深圳集合！但是中间发生一个小插曲，验票时候发现车票不见了，或许也是一场恶作剧，对于不排队的人，忍不住说了一下，接下来就发现车票不见了，已经是拿在手上！不过还好，可以凭借购票订单查看到信息，所以有惊无险，顺利进站！晚上三个人一起去吃了柠檬鱼，说实话，那会，感觉美吃饱，啊哈哈！晚上回来，两个人又开始彻夜长谈，发现身边优秀的人，一大把，
  • “这才好”麻辣香锅 能够增加人身体的免疫能力 小补文知
    我就来介绍一种香锅，那就是“这才好”麻辣香锅，它产出于著名的蜀地文化，具有悠久的历史土家风味，麻辣鲜香，健康安全。采用传统秘制麻辣香锅油辣子，还有贴心加料“孜然包”满足人们的不同口味需求，香锅底料辣椒，微辣且香，含有丰富微量元素和维生素，具有辣而不躁，味道纯正，醇厚温和。花椒采用历史悠久，被列为宫廷供品的“贡椒”的汉源花椒。我们还挑选了“川菜之魂”郫县豆瓣的鼻祖品牌豆瓣，保留最原始的郫县豆瓣味道，
  • 《太虚游》第六十二章。玄牝之威。 古楼臭道士
    “好好好，流云这孩子深得我心，想必长爻知道是你的话定然会惊喜不已的。”白玄牝听得风流云应了下来，脸色慈和，伸手在他头顶轻轻抚了抚，如同抚在怀中九尾小狐一样自然，极其温柔。身后的四位青丘长老同时一怔，嘴角微动，似要开口劝阻。风流云只感到一道霞光瑞气如有实质一般顺着头顶百会大穴直沉在下丹田内，随后这股气息又逐渐凝聚，似乎给自己吃了什么东西一般。啊喔不好，这祖奶奶该不会是看中我这肉身，像人魔一样，要给她
  • html页面js获取参数值 0624chenhong html
    1.js获取参数值js function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");      var r = windo
  • MongoDB 在多线程高并发下的问题 BigCat2013 mongodbDB高并发重复数据
    最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫 展，重复去看 MongoDB 的 API , 终于有了新发现 ： com.mongodb.DB 这个类有
  • c++ 用类模版实现链表(c++语言程序设计第四版示例代码) CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T> class Node { private: Node<T> * next; public: T data;
  • 最近情况 麦田的设计者 感慨考试生活
       在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。   
  • linux系统中用pkill踢出在线登录用户 被触发 linux
    由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户 1/#who   查出当前有那些终端登录（用 w 命令更详细） # who root     pts/0        2010-10-28 09:36 (192
  • 仿QQ聊天第二版 肆无忌惮_ qq
    在第一版之上的改进内容:  第一版链接: http://479001499.iteye.com/admin/blogs/2100893   用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑.   信息修改后上传至服务器再告诉所有用户,自己的窗口
  • java读取配置文件 知了ing
    1，java读取.properties配置文件 InputStream in; try { in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径 Properties p = new Properties()
  • __attribute__ 你知多少？ 矮蛋蛋 C++gcc
    原文地址: http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。 __attribute__ 书写特征是：
  • jsoup使用笔记 alleni123 java爬虫JSoup
    <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency> 2014/08/28 今天遇到这种形式，
  • JAVA中的集合 Collectio 和Map的简单使用及方法 百合不是茶 listmapset
             List ,set ,map的使用方法和区别 java容器类类库的用途是保存对象，并将其分为两个概念：     Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素  ，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的
  • 杀LINUX的JOB进程 bijian1013 linuxunix
    今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉   系统环境：    ORACLE 10G    Linux操作系统   操作步骤如下： 第一步.查询出来那个job在运行，找个对应的SID字段 select * from dba_jobs_running--找到job对应的sid &n
  • Spring AOP详解 bijian1013 javaspringAOP
            最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。 1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用
  • [Gson六]Gson类型适配器(TypeAdapter) bit1129 Adapter
    TypeAdapter的使用动机  Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。   以Date为例，在序列化和反序列化时，Gson默认使用java.
  • 【spark八十七】给定Driver Program， 如何判断哪些代码在Driver运行，哪些代码在Worker上执行 bit1129 driver
    Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分 作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。 计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务
  • nginx 经验总结 ronin47 nginx 总结
    　　　深感nginx的强大，只学了皮毛，把学下的记录。 　　　获取Header 信息，一般是以$http_XX（ＸＸ是小写）            获取body,通过接口，再展开，根据Ｋ取Ｖ 　　　获取uri,以$arg_XX      &n
  • 轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点 bylijinnan 数组
    import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ExoWeb { public static void main(String[] args) { ExoWeb ew=new ExoWeb(); System.out.pri
  • Netty源码学习-Java-NIO-Reactor bylijinnan java多线程netty
    Netty里面采用了NIO-based Reactor Pattern 了解这个模式对学习Netty非常有帮助 参考以下两篇文章： http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf
  • AOP通俗理解 cngolon springAOP
    1.我所知道的aop     初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和 我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而 已。 2.为什么用aop&nb
  • cursor variable 实例 ctrain variable
    create or replace procedure proc_test01 as type emp_row is record( empno emp.empno%type, ename emp.ename%type, job emp.job%type, mgr emp.mgr%type, hiberdate emp.hiredate%type, sal emp.sal%t
  • shell报bash: service: command not found解决方法 daizj linuxshellservicejps
    今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下：   脚本报错如下： ./olap_quick_intall.sh: line 57: service: command not found ./olap_quick_intall.sh: line 59
  • 40个迹象表明你还是PHP菜鸟 dcj3sjt126com 设计模式PHP正则表达式oop
    你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准 ，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函
  • Android逐帧动画的实现 dcj3sjt126com android
    一、代码实现： private ImageView iv; private AnimationDrawable ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout
  • java远程调用linux的命令或者脚本 eksliang linuxganymed-ssh2
    转载请出自出处： http://eksliang.iteye.com/blog/2105862        Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)   使用步骤如下： 1.导包 官网下载: http://www.ganymed.ethz.ch/ssh2/ ma
  • adb端口被占用问题 gqdy365 adb
    最近重新安装的电脑，配置了新环境，老是出现： adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * 百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。 一个比较彻底的解决办法就是修改
  • ASP.NET使用FileUpload上传文件 hvt .netC#hovertreeasp.netwebform
    前台代码： <asp:FileUpload ID="fuKeleyi" runat="server" /> <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" />
  • 代码之谜（四）- 浮点数（从惊讶到思考） justjavac 浮点数精度代码之谜IEEE
    在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。 浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说， 一点都不简单。 单单是说明 IEEE浮点数 就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。 一次面试 记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试， 多年以后，他已经称为了一名很出色的
  • 数据结构随记_1 lx.asymmetric 数据结构笔记
    第一章   1.数据结构包括数据的 逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是 顺序存储、链式存储 、索引存储 和 散列存储。 3.数据运算最常用的有五种，分别是  查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性：  输入、输出、可行性、确定性和有穷性。 5.算法分析的
  • linux的会话和进程组 网络接口 linux
    会话： 一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？ 先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se
  • 二维数组 元素的连续求解 1140566087 二维数组ACM
    import java.util.HashMap; public class Title { public static void main(String[] args){ f(); } // 二位数组的应用 //12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。 public static void f(){
  • 也谈什么时候Java比C++快 windshome javaC++
      刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。   你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？   我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他