成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

「譯」JavaScript 究竟是如何工作的？（第一部分）

Youngdze / 2442人閱讀

摘要：文章的第二部分涵蓋了內存管理的概念，不久后將發(fā)布。的標準化工作是由國際組織負責的，相關規(guī)范被稱為或者。隨著分析器和編譯器不斷地更改字節(jié)碼，的執(zhí)行性能逐漸提高。

原文地址：How Does JavaScript Really Work? (Part 1)



原文作者：Priyesh Patel



譯者：Chor

如果你是一個 JS 開發(fā)者或者是正在學習這門語言的學生，很大概率上你會遇到雙字母詞"V8"。在這篇文章中，我將會為你簡述不同的 JS 引擎并深入探究 V8 引擎的工作機制。文章的第二部分涵蓋了內存管理的概念，不久后將發(fā)布。

這篇文章是由 Bit (GitHub) 帶來的。作為一個共享組件的平臺，Bit 幫助每個人構建模塊化的 JavaScript 應用程序，在項目和團隊之間輕松地共享組件，同時實現更好&更快的構建。試試看。

編程語言是如何工作的？

在開始講解 JavaScript 之前，我們首先要理解任意一門編程語言的基本工作方式。電腦是由微處理器構成的，我們通過書寫代碼來命令這臺小巧但功能強大的機器。但是微處理器能理解什么語言？它們無法理解 Java，Python 等語言，而只懂機器碼。
用機器語言或匯編語言編寫企業(yè)級代碼是不可行的，因此我們需要像 Java，Python 這樣配帶一個解釋器或者編譯器用于將其轉換為機器碼的高級語言。

編譯器和解釋器

編譯器/解釋器可以用它處理的語言或任何其他語言來編寫。

解釋器： 一行一行地快速讀取和翻譯文件。這就是 JavaScript 最初的工作原理。

編譯器： 編譯器提前運行并創(chuàng)建一個文件，其中包含了輸入文件的機器碼轉換。

有兩種途徑可以將 JavaScript 代碼轉換為機器碼。編譯代碼時，機器對代碼開始運行前將要發(fā)生的事情有更好的理解，這將加快稍后的執(zhí)行速度。不過，在這個過程之前需要花費時間。

另一方面，解釋代碼時，執(zhí)行是立即的，因此要更快，但是缺乏優(yōu)化導致它在大型應用程序下運行緩慢。

創(chuàng)建 ECMAScript 引擎的人很聰明，他們集二者之長開發(fā)了 JIT(Just-in-time) 編譯器。JavaScript 同時被編譯和解釋，但實際實現和順序取決于引擎。我們將會看到 V8 團隊采用的是什么策略。

從 JavaScript 到機器碼

就 JavaScript 而言，有一個引擎將其轉換為機器碼。和其他語言類似，引擎可以用任何語言來開發(fā)，因此這樣的引擎不止一個。

V8 是谷歌針對 Chorme 瀏覽器的引擎實現。

SpiderMonkey 是第一個引擎，針對網景瀏覽器開發(fā)，現用于驅動 FireFox。

JavaScriptCore 是蘋果針對 Safari 瀏覽器使用的引擎。

還有很多，如果你想知道 Internet Explorer 背后的引擎，查看這個維基百科頁面.

ECMAScript

面對這么多的引擎，你可能會問：我可以開發(fā)自己的引擎嗎？可以，只要遵循 ECMAScript 標準。

如果我們打算做一個翻譯器，那么就必須知道這兩門語言的有效字。我們已經知道機器語言中什么是有效的了，但是對于 JavaScript，這是需要進行標準化的。

JavaScript 的標準化工作是由 Ecma 國際組織負責的，相關規(guī)范被稱為 ECMAScript 或者 ES。因此，當你看到一篇文章/視頻提到“ES7 有什么新特性？”時，你就知道它代表的是 ECMAScript 標準中新增的 JS 特性。

V8?引擎 部分歷史

谷歌針對瀏覽器開發(fā)了谷歌地圖，而這對瀏覽器的處理能力提出了很高的要求。那時的 JavaScript 實現尚不足以快速地運行地圖。谷歌想要吸引更多的用戶使用這項服務，從而進行廣告銷售并牟利?；谶@個原因，這項服務必須快速且穩(wěn)定。因此谷歌自己用 C++ 開發(fā)了 V8 引擎并在 2008 年啟用，它的速度很快，或者就像一些人說的，它的速度是最快的。

解析和構建樹

JavaScript 文件進入引擎后，解析器進行詞法解析，它將代碼分解成 token 以確定它們的含義。這些 token 組成了AST(抽象語法樹)。

編譯器在語義分析中驗證語言元素和關鍵詞的正確用法，而 ASTs 在這個過程中扮演著重要的角色。之后，ASTs 被用于生成實際的字節(jié)碼或者機器碼。

引擎的核心

我們之前談到，JavaScript 是由 Ignition 這個解釋器解釋的，同時由 TurboFan 這個 JIT 優(yōu)化編譯器進行編譯。

首先，前面步驟生成的 ASTs 傳遞給解釋器，該解釋器迅速生成未經過優(yōu)化的機器碼，并且其執(zhí)行是無延遲的。

Profiler 在代碼運行時進行觀察，找出可以進行優(yōu)化的地方。例如，一個‘for’循環(huán)跑了 100 次，但是每次迭代產生的結果都是一樣的。

使用這個分析器后，任何未優(yōu)化的代碼都將傳遞給編譯器以進行優(yōu)化，同時生成機器碼，它最終會替換掉之前由解釋器生成的未優(yōu)化代碼中的對應部分。

隨著分析器和編譯器不斷地更改字節(jié)碼，JavaScript 的執(zhí)行性能逐漸提高。

更多歷史

在V8 的 5.9 版本推出之前，它使用兩個優(yōu)化編譯器和一個基線編譯器。

基線編譯器 full-codegen 迅速生成未優(yōu)化的機器碼。

兩個優(yōu)化編譯器 Crankshaft 和 TurboFan 用于優(yōu)化代碼。

JavaScript 增加了新的特性后，架構的復雜度上升，維護相同的管道對 V8 團隊來說變得更加困難了。如果你想閱讀更多相關的舊方法以及轉向新管道的原因，可以訪問他們的網站。

放眼未來

隨著更多進一步提升性能的研究的進行，V8 引擎的工作機制在未來還可能發(fā)生變化。此外，隨著 Webassembly 逐漸成形，可能會向管道添加額外步驟。

結論

ECMAScript 引擎的實現有很多，其中以谷歌的 V8 最為出名。希望這篇文章的簡述不僅可以幫助你理解 JavaScript 的工作原理，還能從大體上了解一門編程語言的工作原理。如果你想了解 V8 團隊的未來計劃或者引擎的細節(jié)，這里有一篇很不錯的博客。

本文的第二部分將會在不久后發(fā)布，其中將談到內存堆，棧，事件循環(huán)以及更多與 JavaScript 代碼執(zhí)行相關的概念。敬請關注！

如果你不清楚 Node.js 在其中的作用，我這里碰巧寫了一篇不錯的文章：
What exactly is Node.js?)

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

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

相關文章

  • JavaScript 究竟是如何工作的？（第二部分）

    摘要：內存泄漏指的是，程序之前需要用到部分內存，而這部分內存在用完之后并沒有返回到內存池?；臼录f歸調用為什么是單線程的一個線程代表著在同一時間段內可以單獨執(zhí)行的程序部分的數目。 原文地址：How Does JavaScript Really Work? (Part 2) 原文作者：Priyesh Patel showImg(https://segmentfault.com/img...

    Youngs 評論0 收藏0

  • 基本方法筆記 - 收藏集 - 掘金

    摘要：探討判斷橫豎屏的最佳實現前端掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。 探討判斷橫豎屏的最佳實現 - 前端 - 掘金在移動端，判斷橫豎屏的場景并不少見，比如根據橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。 判斷橫豎屏的實現方法多種多樣，本文就此來探討下目前有哪些實現方法以及其中的優(yōu)...

    maochunguang 評論0 收藏0

  • [譯]開始對Angular App進行單元測試（1）

    摘要：小結我們初步了解了使用來進行測試，這樣有利于我們接下來去理解使用進行單元測試翻譯中 showImg(https://segmentfault.com/img/bVxI9p); 這是一些列文章，陸續(xù)翻譯整理中... 原文地址:http://www.bradoncode.com/blog/2015/05/12/angularjs-testing-getting-started/ @ Bra...

    Tikitoo 評論0 收藏0

  • 2017-07-19 前端日報

    摘要：前端日報精選開發(fā)常見問題集錦前端碼農的自我修養(yǎng)虛擬內部是如何工作的譯知乎專欄并不慢，只是你使用姿勢不對一份優(yōu)化指南掘金老司機帶你秒懂內存管理第一部中文免費公開課前端面試的大關鍵點，你到了嗎知乎專欄高效開發(fā)與設計姐的圖片二三 2017-07-19 前端日報 精選 VueJS 開發(fā)常見問題集錦 - 前端碼農的自我修養(yǎng) - SegmentFault虛擬 DOM 內部是如何工作的？[譯]Hig...

    iflove 評論0 收藏0

  • 【譯】JavaScript中的執(zhí)行上下文和堆棧是什么?

    摘要：每次調用函數時，都會創(chuàng)建一個新的執(zhí)行上下文。理解執(zhí)行上下文和堆?？梢宰屇私獯a為什么要計算您最初沒有預料到的不同值的原因。 首發(fā)：https://www.love85g.com/?p=1723 在這篇文章中，我將深入研究JavaScript最基本的部分之一，即執(zhí)行上下文。在這篇文章的最后，您應該更清楚地了解解釋器要做什么，為什么在聲明一些函數/變量之前可以使用它們，以及它們的值是如何...

    miguel.jiang 評論0 收藏0

發(fā)表評論

0條評論

Youngdze

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<