瀏覽器執(zhí)行機制探究，圖解最直觀

pingink 發(fā)布于2019-08-23 13:40 / 1160人閱讀

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

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

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

由于segmentfault的限制原因，這兒大圖放不上來，大家看圖片的時候需要點擊圖片下方的"查看原圖"才能看清除里面寫的內容

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

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

這兒加一個知識點：

棧：一種數(shù)據(jù)結構，具有的特點：先進后出(FILO—First-In/Last-Out)
隊列：也是一種數(shù)據(jù)結構，具有的特點：先進先出（FIFO—first in first out）

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

圖上我們能看到我們能經(jīng)常聽到的幾個關于瀏覽器執(zhí)行過程的詞語：

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

然后我們一步一步來解析這個玩意兒：

開始執(zhí)行我們寫的這個非常非常非常簡單的js代碼

我們能看到棧里面存上我們要執(zhí)行的console，這兒第一部沒有別的代碼執(zhí)行，開始執(zhí)行下面的代碼，狗昂?。?！

然后就是執(zhí)行我們這個setTimeout函數(shù)，如上圖所示，同樣的先被推入執(zhí)行棧，我們在定時函數(shù)里面整了個匿名函數(shù)，繼續(xù)看

如上圖，咱們這兒的匿名函數(shù)進入了事件表內，然后過1000ms會進入回調隊列里面，繼續(xù)看

跟上面一樣，順序執(zhí)行這個console，然后把咱們在setTimeout內定義的函數(shù)放到了回調隊列中，等待執(zhí)行棧空閑了就會執(zhí)行，繼續(xù)看

上面的圖還是按照咱們熟知的順序執(zhí)行，把最后寫的那個綁定的click事件放入事件表，等待咱們去點擊那個button按鈕觸發(fā)click事件。同時在1秒計時完成后把事件表的匿名函數(shù)推入到回調隊列里面。狗昂?。?/p>

上圖能看到，click事件在事件表了，咱們順序執(zhí)行的代碼已經(jīng)完成，然后執(zhí)行棧空閑了，開始執(zhí)行咱們回調隊列的函數(shù)。繼續(xù)看

上圖中，回調隊列的函數(shù)被推到空閑的執(zhí)行棧中去執(zhí)行。

上圖中，執(zhí)行棧執(zhí)行匿名函數(shù)，我們在控制臺能看到打印的console信息。

這兒還有個小知識點，棧的特性是：先入后出，后入先出。我們現(xiàn)在看到執(zhí)行棧中，console是后于匿名函數(shù)進入棧的，所以棧彈出已經(jīng)執(zhí)行的函數(shù)的順序是先彈出console，然后再彈出匿名函數(shù)。繼續(xù)看

上圖中，等待執(zhí)行棧空閑了，我們去點擊button執(zhí)行click事件。

寫到這兒我估計有杠精要說為啥要等到執(zhí)行棧空了再去點那個button按鈕，笑哭?。。?！我曾經(jīng)遇到過這樣的一個童鞋，非要跟我杠。這兒說明一下，如果執(zhí)行棧還有未執(zhí)行完的函數(shù)，我們點那個按鈕，click事件的回調函數(shù)會按數(shù)組push的方式跟在現(xiàn)在回調隊列數(shù)組后，然后一個一個地再被unshift到我們的執(zhí)行棧去執(zhí)行。

上面三個圖就跟前面執(zhí)行匿名函數(shù)的流程一樣的。

想給大家放一個完整執(zhí)行的過程的gif好像沒找到錄制的工具，后續(xù)如果找到好用的工具我把圖放上來

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

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

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

圖解 React Virtual DOM

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

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

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

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

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

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

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

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

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

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