Osheep

时光不回头,当下最重要。

javaScript在Chrome运行原理解析

大家好我是曲灵晓风,前几天在youtube上看到一哥们讲解js运行原理的东东,感觉讲解的很透彻啊(我都可以理解了),遂记录下来,以便下次查看,若理解有不到位的地方,欢迎大家狠狠拍砖。

《javaScript在Chrome运行原理解析》

js的 Runtime.png

这里堆(heap)的作用是分配内存大小。
而栈(stack)是处理上下文环境的地方,也就是执行代码的地方。

通过执行可以发现:一些普通的函数可以从stack中执行,然而一些函数没有在stack执行,比如:setTimeout或者HTTP request,接下来看第二张图解答。

《javaScript在Chrome运行原理解析》

js 的detail Runtime.png

下面通过问答的形式回答这些问题,感觉这种形式还是挺好的。

  • 为什么setTimeout或者HTTP request这些东西没有和其他函数一样直接在stack中执行呢?

上面这位看官问了一个好问题,原因是: 这些东西会是程序运行阻塞,因此Chrome浏览器会把一些阻塞的东西拿出来在别的地方执行。

  • 那么setTimeout或者HTTP request是在什么地方执行的?

setTimeout或者HTTP request等函数是在web APIs中运行的。这位看官可能问了,这个web APIs是个什么东东?

这个web APIs是由Chrome提供的,类似于java的线程池机制,有很多线程可以调用,js虽然是单线程的,但是里面的web APIs却是多线程,这里的机制和Node是类似的,只不过Node中这里是由C++封装的。

  • 好像还没完呢,web APIs执行完成之后如何把获得数据传给调用栈呢?

恩恩,这次总算是明白了,原来每个在web APIs执行的函数,都有一个回调函数,然后这些相应的回调函数会按照每个异步函数(我们暂时把在webAPs中执行的函数称为异步函数)执行的快慢放到callback queue中,然后待stack清空之后,每次从callback queue中取出一个(对,只是一个不是两个三个),放到stack中执行,最后完成代码的执行。

现在又有看官问了,嘟囔了这么多,你说的对不对啊?
对不对验证一下就行了,上代码。

function foo() {
    throw new Error('Oops');
}
function bar() {
    foo();
}
function baz() {
    bar();
}
baz()

运行之后看结果

/usr/local/bin/node test.js
/Users/zhangwenning/git/jfjun-cw/test.js:5
    throw new Error('Oops');
    ^
Error: Oops
    at foo (/Users/zhangwenning/git/jfjun-cw/test.js:5:11)
    at bar (/Users/zhangwenning/git/jfjun-cw/test.js:9:5)
    at baz (/Users/zhangwenning/git/jfjun-cw/test.js:13:5)
    at Object.<anonymous> (/Users/zhangwenning/git/jfjun-cw/test.js:16:1)

分析:
恩恩,我这次是明白了,看Error日志,错误日志打印的顺序竟然就是函数调用出栈的顺序,这还真不是偶然,看来函数进stack的理论得到了证明。

各位看官还可以通过这个哥们写的模拟V8引擎来实践一下。

另外再说一句:foo,bar, baz到底是什么意思,怎么老美的程序员经常使用这几个单词?其实这几个单词还真没什么意思,这几个单词就相当于中国的张三李四这样举例子。

前方高能,这两个面试题。

问题一:

console.log('hi');
setTimeout(function(cb){
console.log('there')},
0);
console.log('JSConf');

代码运行结果是:
hi
JSConf
there

原因是setTimeout是异步调用,当代码执行后,hi和JSConf依次打印出,但是浏览器一看setTimeout是异步调用,浪费时间,阻塞主进程,所以把它放到web APIs中执行了,然而function(cb)要等到stack清空执行,回调函数才执行,所以there最后打印出来。

问题二:
这个是关于Node的。

 setTimeout(function timeout() {
    console.log('TIMEOUT FIRED');
}, 0);
process.nextTick(function A() {
    console.log(1);
    process.nextTick(function B(){console.log(2);});
});

代码运行结果是:
1
2
TIMEOUT FIRED

process.nextTick方法可以在当前”执行栈”的尾部,Event Loop触发回调之前,就是在callback queue 的头部插入这个回调函数,而setTimeout要等到执行栈清空之后才可执行,

最后,送给大家一首郭德纲的定场诗放松一下

金山竹影几千秋,云锁高飞水自流。 
万里长江飘玉带,一轮明月滚金球。 
远至湖北三千里。近到江南十六州。 
美景一时观不尽,天缘有份画中游。
点赞