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