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

pingink 發布于2019-08-23 13:40 / 1154人閱讀

摘要：同時在秒計時完成后把事件表的匿名函數推入到回調隊列里面。上圖中，執行棧執行匿名函數，我們在控制臺能看到打印的信息。我們現在看到執行棧中，是后于匿名函數進入棧的，所以棧彈出已經執行的函數的順序是先彈出，然后再彈出匿名函數。

做了這么久前端，自己一直很想深入去了解了解這些玩意兒，奈何天天撲在項目上，基本沒有閑余時間去想去做

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

由于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好像沒找到錄制的工具，后續如果找到好用的工具我把圖放上來

云服務器 GPU云服務器執行機制 js執行機制 php執行的機制原理探究

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99346.html

圖解 React Virtual DOM

摘要：判斷是否是有效的元素。主要和同構相關。是真實的模擬，真實是由真實的元素構成，也是由虛擬的元素構成。當這些對象上的數據發生變化時，通過打把變化同步到真實的上去。原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。作者：阿希（滬江Web前端開發工程師）本文原創，轉載請注明作者及出處。了解 React 的人幾乎都聽過說 Virtual DOM，甚至不了解 React 的人也聽過 Vi...

Soarkey 2019-08-20 19:02 評論0 收藏0
前端基礎進階（一）：內存空間詳細圖解

摘要：一棧數據結構與不同，中并沒有嚴格意義上區分棧內存與堆內存。引用數據類型的值是保存在堆內存中的對象。不允許直接訪問堆內存中的位置，因此我們不能直接操作對象的堆內存空間。為了更好的搞懂變量對象與堆內存，我們可以結合以下例子與圖解進行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 評論0 收藏0
前端基礎進階（四）：詳細圖解作用域鏈與閉包

摘要：之前一篇文章我們詳細說明了變量對象，而這里，我們將詳細說明作用域鏈。而的作用域鏈，則同時包含了這三個變量對象，所以的執行上下文可如下表示。下圖展示了閉包的作用域鏈。其中為當前的函數調用棧，為當前正在被執行的函數的作用域鏈，為當前的局部變量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初學JavaScrip...

aikin 2019-08-21 18:29 評論0 收藏0
【進階1-1期】理解JavaScript 中的執行上下文和執行棧

摘要：首次運行代碼時，會創建一個全局執行上下文并到當前的執行棧中。執行上下文的創建執行上下文分兩個階段創建創建階段執行階段創建階段確定的值，也被稱為。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，，今天是第一天本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進...

import. 2019-08-23 13:46 評論0 收藏0
后臺開發常問面試題集錦（問題搬運工，附鏈接）

摘要：基礎問題的的性能及原理之區別詳解備忘筆記深入理解流水線抽象關鍵字修飾符知識點總結必看篇中的關鍵字解析回調機制解讀抽象類與三大特征時間和時間戳的相互轉換為什么要使用內部類對象鎖和類鎖的區別，，優缺點及比較提高篇八詳解內部類單例模式和 Java基礎問題 String的+的性能及原理 java之yield(),sleep(),wait()區別詳解-備忘筆記深入理解Java Stream流水...

spacewander 2019-08-21 17:42 評論0 收藏0