瀏覽器執行機制探究，圖解最直觀

作了這麼久前端，本身一直很想深刻去了解了解這些玩意兒，奈何每天撲在項目上，基本沒有閒餘時間去想去作

面試的時候你們應該也會被問到一些瀏覽器執行機制的問題，我最近也去研究了一下，分享一點本身的心得。

因爲segmentfault的限制緣由，這兒大圖放不上來，你們看圖片的時候須要點擊圖片下方的"查看原圖"才能看清除裏面寫的內容

---

寫得很差，或者有意見的直接噴，不用走流程。也歡迎大佬指點

---

用圖片的執行流程來解釋一下，有圖有真相

這兒加一個知識點：

棧：一種數據結構，具備的特色：先進後出(FILO—First-In/Last-Out)
隊列：也是一種數據結構，具備的特色：先進先出（FIFO—first in first out）

先來一張圖（ps：有沒有跟我同款的輸入法主題的，握個抓爪，哈哈）：

圖上咱們能看到咱們能常常聽到的幾個關於瀏覽器執行過程的詞語：

棧：順序存放咱們要執行代碼
事件表：存放咱們將要執行的事件（我以爲能夠理解爲在某些條件下執行的事件），例如圖上的setTimeout內部的匿名函數、click事件（圖上anonymous是匿名的意思，估計有童鞋不知道，寫這兒了）
回調隊列：這個應該很熟悉了，就是咱們定義執行的回調函數組成的隊列

而後咱們一步一步來解析這個玩意兒：

開始執行咱們寫的這個很是很是很是簡單的js代碼

咱們能看到棧裏面存上咱們要執行的console，這兒第一部沒有別的代碼執行，開始執行下面的代碼，狗昂！！！

而後就是執行咱們這個setTimeout函數，如上圖所示，一樣的先被推入執行棧，咱們在定時函數裏面整了個匿名函數，繼續看

如上圖，我們這兒的匿名函數進入了事件表內，而後過1000ms會進入回調隊列裏面，繼續看

跟上面同樣，順序執行這個console，而後把我們在setTimeout內定義的函數放到了回調隊列中，等待執行棧空閒了就會執行，繼續看

上面的圖仍是按照我們熟知的順序執行，把最後寫的那個綁定的click事件放入事件表，等待我們去點擊那個button按鈕觸發click事件。同時在1秒計時完成後把事件表的匿名函數推入到回調隊列裏面。狗昂！！

上圖能看到，click事件在事件表了，我們順序執行的代碼已經完成，而後執行棧空閒了，開始執行我們回調隊列的函數。繼續看

上圖中，回調隊列的函數被推到空閒的執行棧中去執行。

上圖中，執行棧執行匿名函數，咱們在控制檯能看到打印的console信息。

這兒還有個小知識點，棧的特性是：先入後出，後入先出。咱們如今看到執行棧中，console是後於匿名函數進入棧的，因此棧彈出已經執行的函數的順序是先彈出console，而後再彈出匿名函數。繼續看

上圖中，等待執行棧空閒了，咱們去點擊button執行click事件。

寫到這兒我估計有槓精要說爲啥要等到執行棧空了再去點那個button按鈕，笑哭啊！！！我曾經遇到過這樣的一個童鞋，非要跟我槓。這兒說明一下，若是執行棧還有未執行完的函數，咱們點那個按鈕，click事件的回調函數會按數組push的方式跟在如今回調隊列數組後，而後一個一個地再被unshift到咱們的執行棧去執行。

上面三個圖就跟前面執行匿名函數的流程同樣的。

想給你們放一個完整執行的過程的gif好像沒找到錄製的工具，後續若是找到好用的工具我把圖放上來