1. 程式人生 > 程式設計 >前端 JavaScript執行原理

前端 JavaScript執行原理

目錄
  • 1、什麼是引擎
  • 2、V8引擎
  • 3、執行時環境
  • 4、執行時的呼叫棧
  • 5、非同步任務
  • 6、總結

1、什麼是Script引擎

JavaScript引擎是一個計算機程式,它的主要作用是JavaScript執行時將原始碼編譯為機器碼。

每個主流Web瀏覽器都有自己的JavaScript引擎,它通常由web瀏覽器供應商開發。

前端 JavaScript執行原理

  • Google Chrome V8。
  • Mozilla Firefox Spider Monkey。
  • Safari Javascript Core Webkit。
  • Edge (Internet Explorer)

以前的JavaScript

引擎主要在web瀏覽器使用,不過隨著node的出現就打破了這種侷限。

2、V8引擎

V8包含了解析器(parser),直譯器(Ignition),優化編譯器(TurboFan )。

解析器(parser):用於生成抽象語法樹。

前端 JavaScript執行原理

直譯器(Ignition):將原始碼轉換為位元組碼。

前端 JavaScript執行原理

優化編譯器(TurboFan ):進行一些優化編譯優化處理,比如內聯快取。

下面是V8引擎的大體工作流程。

  • 首先 解析器 先生成一個抽象語法樹。
  • 然後 直譯器 根據語法樹生成VLJPRAoWb8格式的位元組碼。
  • 優化編譯器 再將位元組碼編譯成機器碼。

前端 JavaScript執行原理

3、執行時環境

瀏覽器執行環境中,瀏覽器提供了Web API

如:HTTP請求,計時器,事件等。

伺服器執行環境中,nodejs提供了API。

下面是JavaScript在瀏覽器中執行時的架構,它包含一個記憶體堆、一個記憶體棧、一個事件迴圈、一個回撥佇列。

前端 JavaScript執行原理

stack
heap
call stack
callbackwww.cppcns.com queue
event loop

4、執行時的呼叫棧

下面程式碼展示了JavaScript執行的呼叫棧變化。

前端 JavaScript執行原理

function add(x,y) {
    return x + y;
}

function print(x,y) {
    console.log('x+y=',add(x,y))
}

print(1,
3)

5、非同步任務

JavaScript先執行了 print 函式,然後呼叫Web API setTimeout() Web API儲存了 setTimeout() 的回撥函式,3秒後將回調函式新增到回撥佇列,事件迴圈發現呼叫棧為空,於是將佇列裡的回撥函式移至呼叫棧執行。

前端 JavaScript執行原理

function add(x,y) {
    setTimeout(function (){
        console.log('x+y=',y))
    },3000)
}

print(1,3)

6、總結

JavaScript執行主要依靠JavaScript引擎和執行環境, 引擎 將js原始碼翻譯成計算機所理解的機器碼, 執行環境 提供了一些與計算機底層通訊的API和執行實現。

LJPRAoWb

到此這篇關於前端 JavaScript執行原理的文章就介紹到這了,更多相關JavaScript執行原理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!