javascript引擎工作原理

1. 什麼是JavaScript解析引擎?

簡單地說,JavaScript解析引擎就是能夠“讀懂”JavaScript代碼,並準確地給出代碼運行結果的一段程序。比方說,當你寫了 var a = 1 + 1; 這樣一段代碼,JavaScript引擎做的事情就是看懂(解析)你這段代碼,並且將a的值變為2。

學過編譯原理的人都知道,對於靜態語言來說(如Java、C++、C),處理上述這些事情的叫編譯器(Compiler),相應地對於JavaScript這樣的動態語言則叫解釋器(Interpreter)。這兩者的區別用一句話來概括就是:編譯器是將源代碼編譯為另外一種代碼(比如機器碼,或者字節碼),而解釋器是直接解析並將代碼運行結果輸出。 比方說,firebug的console就是一個JavaScript的解釋器。

但是,現在很難去界定說,JavaScript引擎它到底算是個解釋器還是個編譯器,因為,比如像V8(Chrome的JS引擎),它其實為了提高 JS的運行性能,在運行之前會先將JS編譯為本地的機器碼(native machine code),然後再去執行機器碼(這樣速度就快很多),相信大家對JIT(Just In Time Compilation)一定不陌生吧。

我個人認為,不需要過分去強調JavaScript解析引擎到底是什麼,瞭解它究竟做了什麼事情我個人認為就可以了。對於編譯器或者解釋器究竟是如何看懂代碼的,翻出大學編譯課的教材就可以了。

這裡還要強調的就是,JavaScript引擎本身也是程序,代碼編寫而成。比如V8就是用C/C++寫的。

2. JavaScript解析引擎與ECMAScript是什麼關係?

JavaScript引擎是一段程序,我們寫的JavaScript代碼也是程序,如何讓程序去讀懂程序呢?這就需要定義規則。比如,之前提到的var a = 1 + 1;,它表示:

  • 左邊var代表了這是申明(declaration),它申明瞭a這個變量
  • 右邊的+表示要將1和1做加法
  • 中間的等號表示了這是個賦值語句
  • 最後的分號表示這句語句結束了

上述這些就是規則,有了它就等於有了衡量的標準,JavaScript引擎就可以根據這個標準去解析JavaScript代碼了。那麼這裡的 ECMAScript就是定義了這些規則。其中ECMAScript 262這份文檔,就是對JavaScript這門語言定義了一整套完整的標準。其中包括:

  • var,if,else,break,continue等是JavaScript的關鍵詞
  • abstract,int,long等是JavaScript保留詞
  • 怎麼樣算是數字、怎麼樣算是字符串等等
  • 定義了操作符(+,-,>,
  • 定義了JavaScript的語法
  • 定義了對錶達式,語句等標準的處理算法,比如遇到==該如何處理
  • ⋯⋯

標準的JavaScript引擎就會根據這套文檔去實現,注意這裡強調了標準,因為也有不按照標準來實現的,比如IE的JS引擎。這也是為什麼JavaScript會有兼容性的問題。至於為什麼IE的JS引擎不按照標準來實現,就要說到瀏覽器大戰了,這裡就不贅述了,自行Google之。

所以,簡單的說,ECMAScript定義了語言的標準,JavaScript引擎根據它來實現,這就是兩者的關係。

3. JavaScript解析引擎與瀏覽器又是什麼關係?

簡單地說,JavaScript引擎是瀏覽器的組成部分之一。因為瀏覽器還要做很多別的事情,比如解析頁面、渲染頁面、Cookie管理、歷史記錄 等等。那麼,既然是組成部分,因此一般情況下JavaScript引擎都是瀏覽器開發商自行開發的。比如:IE9的Chakra、Firefox的 TraceMonkey、Chrome的V8等等。

從而也看出,不同瀏覽器都採用了不同的JavaScript引擎。因此,我們只能說要深入瞭解哪個JavaScript引擎。

4. 深入瞭解其內部原理的途徑有哪些?

搞清楚了前面三個問題,那這個問題就好回答了。個人認為,主要途徑有如下幾種(依次由淺入深):

看講JavaScript引擎工作原理的書

這種方式最方便,不過我個人瞭解到的這樣的書幾乎沒有,但是Dmitry A.Soshnikov博客上的文章真的是非常的贊,建議直接看英文,實在英文看起來吃力的,可以看譯本

看ECMAScript的標準文檔

這種方式相對直接,原汁原味,因為引擎就是根據標準來實現的。目前來說,可以看第五版和第三版,不過要看懂也是不容易的。

看JS引擎源代碼

這種方式最直接,當然也最難了。因為還牽涉到了如何實現詞法分析器,語法分析器等等更加底層的東西了,而且並非所有的引擎代碼都是開源的。

5. 以上幾種方式中第一種都很難看明白怎麼辦?

其實第一種方式中的文章,作者已經將文檔中內容提煉出來,用通俗易懂的方式闡述出來了。如果,看起來還覺得吃力,那說明還缺少兩塊的東西:

對JavaScript本身還理解的不夠深入

如果你剛剛接觸JavaScript,或者說以前甚至都沒有接觸過。那一下子就想要去理解內部工作原理,的確是很吃力的。首先應該多看看書,多實踐實踐,從知識和實踐的方式來了解JavaScript預言特性。這種情況下,你只需要瞭解現象。比方說,(function(){})() 這樣可以直接調用該匿名函數、用閉包可以解決循環中的延遲操作的變量值獲取問題等等。要了解這些,都是需要多汲取和實踐的。實踐這裡就不多說了,而知識汲取方面可以多看看書和博客。這個層面的書就相對比較多了,《Professional JavaScript for Web Developers》就是本很好的書(中文版請自行尋找)。

缺乏相應的領域知識

當JavaScript也達到一定深度了,但是,還是看不大明白,或者沒法很深入到內部去一探究竟。那就意味著缺少對 應的領域知識。這裡明顯的就是編譯原理相關的知識。不過,其實對這塊瞭解個大概基本看起來就沒問題了。要再繼續深入,那需要對編譯原理了解的很深入,比如 說詞法分析採用什麼算法,一般怎麼處理。會有什麼問題,如何解決,AST生成算法一般有哪幾種等等。那要看編譯原理方面的書,也有基本經典的書,比如《Compilers: Principles, Techniques, and Tools》這本也是傳說中的龍書,還有非常著名的《SICP》和《PLAI》。 不過其實根據個人經驗,對於Dmitry的文章,要看懂它,只要你對JavaScript有一定深度的瞭解,同時你大學計算機的課程都能大致掌握了(尤其 是操作系統),也就是說基礎不錯,理解起來應該沒問題。因為這些文章基本沒有涉及底層編譯相關的,只是在解釋文檔的內容,並且其中很多東西都是相通的,比 如:context的切換與CPU的進程切換、函數相關的的局部變量的棧存儲、函數退出的操作等等都是一致的。


分享到:


相關文章: