javascript运行环境和机制的介绍
搞了那么久的前端，从开始用jquery快速写一些效果，还有一些类似于kissy的框架等等，这些东西，通过模块的规范，加载的机制，还有api的封装，可以快速的实现一些效果，开发一些应用，以及后面流行下来的是声明是渲染，函数式编程。
可是，底层的JavaScript的运行机制，没有怎么了解过，我们来看看。 JavaScript的运行机制里面，非阻塞，单线程的机制，是不是。。
下图所示(也许这个图可以重新花一遍)：
stack 栈
栈，push push push 然后pop pop pop 好了，一个先进后出的数据模型，在js里面，有这么一个stack，我们用一个函数call它出来看看。
这个函数的意思是，callstack函数，内部return 然后调用他本身，运行下来，应该是，一直调用，往下走，好了，很明显，计算机不是无穷的，给stack最大长度设了限制，然后，触达了最大的调用限制，v8 print到window上面来了。过程大概是这样的，如下图：
再比如，JavaScript的链式作用于，作用于或者函数之间的调用，如下所示：
这样的话，看起来，过程是这样的，进栈的顺序是 c b a ，然后，从a开始return。
非阻塞(no-blocking)方案
接着上面的栈来讲，v8会把运行时里面的函数推到栈里面去，然后一个个的去执行。 首先，计算机系统里面，你拿资源是耗时间的，但是，你去拿raw，很快，几乎不用等，你去拿硬盘数据，可能稍微慢一点，但是也还可以，你去拿网络数据，发起请求，就很慢了，所以，如果函数中有长时间的等待过程，如果是blocking的，而js是单线程的，所以，你只能一次做一件事情。
不知大家是否有影响，一些写的非常不好代码，页面里面声明了一些按钮，一些操作，然后，因为js还在运行，导致了你的操作滞后了，浏览器记住了你的`操作，然后，后面一个一个的执行了出来。
还有就是电脑非常落后的时候，cpu很慢的时候，也要类似的现象。所以，这个时候，浏览器其实是在做什么呢? 浏览器其实是一次可以完成非常多的工作，只是隐藏了一些你所不知道的细节在里面。
下面我们来介绍这个单线程，但是一次性可以做非常多工作的模型。
js的运行栈里面，我们一个工程上，往栈里面压函数，然后执行，返回，下一个，这样的节奏。而这个时候，如果是一个异步的网络请求，会发生什么呢?
执行栈里面，其实很快就可以继续下一个函数的操作，为什么?为什么非阻塞，因为有另外的模型，在处理等待，也即是callback咯。callback底层有是怎么做的呢?
所以，首先，要认识到，浏览器的webapi其实是一个独立出来的api环境，包括捕捉用户的鼠标点击，双击，滑动，选择，等等操作。我们不知道浏览器内部的线程情况，比如，ui线程负责显示，什么线程负责repaint这些，什么线程负责解析树，什么线程负责，不清楚，但是，我们可以推断的是，webapi是另外的线程在控制，所以，不占用V8的线程。其他的部件也是不占用v8线程的，具体怎么排布可能要去研究浏览器内部的实现，而且每个浏览器也不一样。大体上，模型是一致的。
所以，在这样的前提下，我们把模型画出来，如下图所示：
webapi管着定时器，管着xhr异步，管着跟用户的操作，但是，这些都有一个特征，就是callback，callback可以索引到一块定义好的函数区域，然后，webapi在自身准备好的时候，(这个准备好ready的过程不描述，可能是用户滚动，移动端上，用户的操作，或者各种内置的接口)推出callback，把callback交给任务队列，而事件循环做的事情，就是把任务队列里面的时间放到执行栈里面去执行。
好，我们脑补一个xhr的过程，把某个执行的上下文压入stack里面，然后执行到xhr调用，这个时候，xhr调用执行完退出执行stack，webapi里面预制起了xhr的callback，这个callback是定义好的。然后，执行栈继续做下面的操作。不同线程不相干。 然后，xhr在自己的process完成之后，把数据结构拿回到callback，然后，callback的索引放到任务队列里面，这个时候，有两个while(true)一直跑着，一个是事件循环，一个是执行栈。任务队列是先进先出，事件循环拿出去，然后放到执行栈里面执行，over。
好，我们再脑补一个click过程，某个执行上下文压人stack里面，click的bind，这个时候，bind推出栈，然后，webapi里面声明了绑定事件，以及callback，然后，等用户click的时候，callback开始往任务队列里面压callback，然后，时间循环又来了，执行callback。
【本文来源于(微信公众号：猪猪侠杂谈)】
本文为原创文章，版权归作者所有，未经授权不得转载!
【javascript运行环境和机制的介绍】相关文章：
PHP底层的运行机制与原理08-12
CSS和JavaScript脚本实例11-09
职业与环境管理体系的建立和运行08-24
1.5操作系统的运行环境简单介绍说明11-18
如何设置java的运行环境10-05
Java程序开发与运行环境11-10
Java程序开发与运行环境11-09
JavaScript的应用11-11