瀏覽器之 javaScript 引擎

booster 發(fā)布于2019-08-23 11:55 / 3078人閱讀

摘要：書接上文瀏覽器之硬件加速機制本章主要講解中廣泛使用的引擎和引擎。解釋器在某些引擎中，解釋器主要是接收字節(jié)碼，解釋執(zhí)行這個字節(jié)碼，同時也依賴垃圾回收機制等。

微信公眾號：愛寫bugger的阿拉斯加
如有問題或建議，請后臺留言，我會盡力解決你的問題。

前言

此文章是我最近在看的【W(wǎng)ebKit 技術內(nèi)幕】一書的一些理解和做的筆記。

而【W(wǎng)ebKit 技術內(nèi)幕】是基于 WebKit 的 Chromium 項目的講解。

書接上文瀏覽器之硬件加速機制

本章主要講解 WebKit 中廣泛使用的 JavaScriptCore 引擎和 V8 引擎。

1. javaScript 簡介

JavaScript 是一種腳本語言，主要用在 Web 的客戶端，是控制網(wǎng)頁客戶端的邏輯，例如同用戶的交互，異步通信等需求。

本質(zhì)上它是一種解釋語言，函數(shù)是它的第一等公民，也就是函數(shù)也能夠當作參數(shù)或者返回值來傳遞。

JavaScript 語言的一個重大特點就是，它是一種無類型語言，或者說是動態(tài)類型語言。

這一特性導致我們沒有辦法有編譯的時候知道變量的類型，所以只能在運行的時候才能確定。

推動 JavaScript 運行速度提高的另一大利器是 JIT（Just-In-Time）技術，它不是一項全新的技術，其作用是解決解釋性語言的性能問題。

主要思想是當解釋器將代碼解釋成內(nèi)部表示的時候，JavaScript 的執(zhí)行環(huán)境不僅是解釋這些內(nèi)部表示，而且將其中一些字節(jié)碼（主要是使用率高的部分）轉(zhuǎn)成本地代碼（匯編代碼），這樣可以被 CPU 直接執(zhí)行，而不是解釋執(zhí)行，從而極大提高性能。

1.2 JavaScript 引擎

JavaScript 引擎就是能夠?qū)? JavaScript 代碼處理并執(zhí)行的運行環(huán)境。

JavaScript 引擎包括以下部分：

編譯器：將源代碼編譯成抽象語法樹，在某些引擎中還包含將抽象語法樹轉(zhuǎn)換成字節(jié)碼。

解釋器：在某些引擎中，解釋器主要是接收字節(jié)碼，解釋執(zhí)行這個字節(jié)碼，同時也依賴垃圾回收機制等。

JIT 工具：一個能夠 JIT 的工具，將字節(jié)碼或者抽象語法樹轉(zhuǎn)換在本地代碼，當然它也需要依賴牢記。

垃圾回收器和分析工具（Profiler）：負責垃圾回收和收集引擎中的信息，幫助改善引擎的性能和功效。

1.3 JavaScript 引擎和渲染引擎

從模塊上看，它們是兩個獨立的模塊，分別負責不同的事情：

JavaScript 引擎負責執(zhí)行 JavaScript 代碼，而渲染引擎負責渲染網(wǎng)頁。

JavaScript 引擎提供調(diào)用接口給渲染引擎，以便讓渲染引擎使用 JavaScript 引擎來處理JavaScript 代碼并獲取結(jié)果。

這并不是全部，JavaScript 引擎需要能夠訪問渲染引擎構(gòu)建的 DOM 樹，所以 JavaScript 引擎通常需要提供橋接的接口，而渲染引擎則根據(jù)橋接接口來提供讓 JavaScript 訪問 DOM 的能力。

在現(xiàn)在眾多的 HTML5 能力中，很多是通過 JavaScript 接口提供給開發(fā)者的，所以這部分同樣需要根據(jù)橋接接口來實現(xiàn)具體類，以便讓 JavaScript 引擎能夠回調(diào)渲染引擎的具體實現(xiàn)。

在 WebKit 中，兩種引擎通過橋接接口來訪問 DOM 結(jié)構(gòu)，這對性能來說是一個重大的損失，因為每次 JavaScript 代碼訪問 DOM 都需要通過復雜和低效的橋接接口來完成。

1.2 V8 引擎 1.2.1 基礎

V8 是一個開源項目，也是一個 JavaScript 引擎的實現(xiàn)。

V8 支持眾多的操作系統(tǒng)。包括但是不限于 Windows、Liunx、Android、Mac OSX 等。同時它也能夠支持眾多的硬件架構(gòu)，例如 IA32、X64、ARM 、MIPS 等。

1.2.1.1 代碼結(jié)構(gòu)

1.2.2 V8 工作過程

V8 工作過程有兩個階段，第一是編譯，第二是運行。

鑒于 JavaScript 語言的工作方式，它們都是在用戶使用它們的時候發(fā)生。

同時，V8 還有一個特點是延遲（deferred）思想，這使得很多 JavaScript 代碼的編譯直到運行的時候被調(diào)用到才會發(fā)生，這樣可以減少時間開銷。

先看編譯階段：

從圖中可以看出，首先它也是將源代碼轉(zhuǎn)變成抽象語法樹，V8 引擎并不將抽象語法樹轉(zhuǎn)變成字節(jié)碼或者其他中間表示，而是通過 JIT 編譯器的全代碼生成器（full code generator）從抽象語法樹直接生成本地代碼，這樣子減少了轉(zhuǎn)換時間。

再看運行階段：
V8 支持 JavaScript 代碼運行用到了一堆類。

V8 引擎是按照圖 9-17 中描述的過程來執(zhí)行的，實際過程更為復雜，而且還有垃圾回收等處理。

1.3 JavaScriptCore 引擎

JavaScriptCore 引擎是 WebKit 中默認的 JavaScript 引擎，也是蘋果開源 WebKit 項目之后，開源的另外一個重要的項目。

1.3.2 架構(gòu)和模塊 1.3.2.1 代碼結(jié)構(gòu)

演進過程：

首先是詞法和語法分析，然后使用底層解釋器來解釋那些字節(jié)碼。
之后，通過簡單的 JIT 編譯器將它們轉(zhuǎn)化成本地代碼，最后就是引入 DFG JIT 編譯器。

最后

最后送上編寫高效JavaScript代碼

希望本文對你有點幫助。

下期分享【第九章 JavaScript 引擎】敬請期待。

對全棧開發(fā) 有興趣的朋友可以掃下方二維碼關注我的公眾號 —— 愛寫bugger的阿拉斯加

分享 web 開發(fā)相關的技術文章，熱點資源，全棧程序員的成長之路。

大家一起交流成長。

只要關注公眾號并回復福利便送你六套視頻資源： Python、Java、Linux、Go、vue、react、javaScript

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97684.html

Javascript系列之javascript機制

摘要：異步任務必須指定回調(diào)函數(shù)，當異步任務從任務隊列回到執(zhí)行棧，回調(diào)函數(shù)就會執(zhí)行。事件循環(huán)主線程從任務隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為。事件循環(huán)事件循環(huán)是指主線程重復從消息隊列中取消息執(zhí)行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執(zhí)行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能優(yōu)化小技巧

摘要：在中渲染樹中的每個節(jié)點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區(qū)域通常是和一個節(jié)點的盒模型相對應。坐標系統(tǒng)是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區(qū)域。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請查閱這里。 ...

GraphQuery 2019-08-02 16:03 評論0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能優(yōu)化小技巧

摘要：在中渲染樹中的每個節(jié)點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區(qū)域通常是和一個節(jié)點的盒模型相對應。坐標系統(tǒng)是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區(qū)域。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請查閱這里。 ...

Allen 2019-08-22 18:07 評論0 收藏0
JavaScript 工作原理之十一－渲染引擎及性能優(yōu)化小技巧

摘要：在中渲染樹中的每個節(jié)點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區(qū)域通常是和一個節(jié)點的盒模型相對應。坐標系統(tǒng)是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區(qū)域。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請查閱這里。 ...

RyanQ 2019-08-30 15:53 評論0 收藏0
javasctipt 工作原理之調(diào)用棧

摘要：譯者注翻譯一個對新手比較友好的工作原理解析系列文章注意以下全部是概念經(jīng)驗豐富的老鳥可以離場啦正文從這里開始隨著的流行團隊們正在利用來支持多個級別的技術棧包括前端后端混合開發(fā)嵌入式設備以及更多這篇文章旨在成為深入挖掘和實際上他是怎么工作的系列譯者注翻譯一個對新手比較友好的 JavaScript 工作原理解析系列文章注意: 以下全部是概念,經(jīng)驗豐富的老鳥可以離場啦正文從這里開始隨...

Pines_Cheng 2019-08-23 10:38 評論0 收藏0