資訊專欄INFORMATION COLUMN
摘要：書接上文瀏覽器之硬件加速機制本章主要講解中廣泛使用的引擎和引擎。解釋器在某些引擎中，解釋器主要是接收字節碼，解釋執行這個字節碼，同時也依賴垃圾回收機制等。
微信公眾號：愛寫bugger的阿拉斯加前言
如有問題或建議，請后臺留言，我會盡力解決你的問題。
此文章是我最近在看的【WebKit 技術內幕】一書的一些理解和做的筆記。
而【WebKit 技術內幕】是基于 WebKit 的 Chromium 項目的講解。
書接上文 瀏覽器之硬件加速機制
本章主要講解 WebKit 中廣泛使用的 JavaScriptCore 引擎和 V8 引擎。
1. javaScript 簡介JavaScript 是一種腳本語言，主要用在 Web 的客戶端，是控制網頁客戶端的邏輯，例如同用戶的交互，異步通信等需求。
本質上它是一種解釋語言，函數是它的第一等公民，也就是函數也能夠當作參數或者返回值來傳遞。
JavaScript 語言的一個重大特點就是，它是一種無類型語言，或者說是動態類型語言。
這一特性導致我們沒有辦法有編譯的時候知道變量的類型，所以只能在運行的時候才能確定。
推動 JavaScript 運行速度提高的另一大利器是 JIT（Just-In-Time）技術，它不是一項全新的技術，其作用是解決解釋性語言的性能問題。
主要思想是當解釋器將代碼解釋成內部表示的時候，JavaScript 的執行環境不僅是解釋這些內部表示，而且將其中一些字節碼（主要是使用率高的部分）轉成本地代碼（匯編代碼），這樣可以被 CPU 直接執行，而不是解釋執行，從而極大提高性能。
1.2 JavaScript 引擎JavaScript 引擎就是能夠將 JavaScript 代碼處理并執行的運行環境。
JavaScript 引擎包括以下部分：
編譯器：將源代碼編譯成抽象語法樹，在某些引擎中還包含將抽象語法樹轉換成字節碼。
解釋器：在某些引擎中，解釋器主要是接收字節碼，解釋執行這個字節碼，同時也依賴垃圾回收機制等。
JIT 工具：一個能夠 JIT 的工具，將字節碼或者抽象語法樹轉換在本地代碼，當然它也需要依賴牢記。
垃圾回收器和分析工具（Profiler）：負責垃圾回收和 收集引擎中的信息，幫助改善引擎的性能和功效。
1.3 JavaScript 引擎和渲染引擎從模塊上看，它們是兩個獨立的模塊，分別負責不同的事情：
JavaScript 引擎負責執行 JavaScript 代碼，而渲染引擎負責渲染網頁。
JavaScript 引擎提供調用接口給渲染引擎，以便讓渲染引擎使用 JavaScript 引擎來處理JavaScript 代碼并獲取結果。
這并不是全部，JavaScript 引擎需要能夠訪問渲染引擎構建的 DOM 樹，所以 JavaScript 引擎通常需要提供橋接的接口，而渲染引擎則根據橋接接口來提供讓 JavaScript 訪問 DOM 的能力。
在現在眾多的 HTML5 能力中，很多是通過 JavaScript 接口提供給開發者的，所以這部分同樣需要根據橋接接口來實現具體類，以便讓 JavaScript 引擎能夠回調渲染引擎的具體實現。
在 WebKit 中，兩種引擎通過橋接接口來訪問 DOM 結構，這對性能來說是一個重大的損失，因為每次 JavaScript 代碼訪問 DOM 都需要通過復雜和低效的橋接接口來完成。
1.2 V8 引擎 1.2.1 基礎V8 是一個開源項目，也是一個 JavaScript 引擎的實現。
V8 支持眾多的操作系統。包括但是不限于 Windows、Liunx、Android、Mac OSX 等。同時它也能夠支持眾多的硬件架構，例如 IA32、X64、ARM 、MIPS 等。
1.2.1.1 代碼結構 1.2.2 V8 工作過程V8 工作過程有兩個階段，第一是編譯，第二是運行。
鑒于 JavaScript 語言的工作方式，它們都是在用戶使用它們的時候發生。
同時，V8 還有一個特點是 延遲（deferred）思想，這使得很多 JavaScript 代碼的編譯直到運行的時候被調用到才會發生，這樣可以減少時間開銷。
先看編譯階段：
從圖中可以看出，首先它也是將源代碼轉變成抽象語法樹，V8 引擎并不將抽象語法樹轉變成字節碼或者其他中間表示，而是通過 JIT 編譯器的全代碼生成器（full code generator）從抽象語法樹直接生成本地代碼，這樣子減少了轉換時間。
再看運行階段：
V8 支持 JavaScript 代碼運行用到了一堆類。
V8 引擎是按照圖 9-17 中描述的過程來執行的，實際過程更為復雜，而且還有垃圾回收等處理。
1.3 JavaScriptCore 引擎JavaScriptCore 引擎是 WebKit 中默認的 JavaScript 引擎，也是蘋果開源 WebKit 項目之后，開源的另外一個重要的項目。
1.3.2 架構和模塊 1.3.2.1 代碼結構演進過程：
首先是詞法和語法分析，然后使用底層解釋器來解釋那些字節碼。
之后，通過簡單的 JIT 編譯器將它們轉化成本地代碼，最后就是引入 DFG JIT 編譯器。
最后送上 編寫高效JavaScript代碼
希望本文對你有點幫助。
下期分享 【第九章 JavaScript 引擎】 敬請期待。
對 全棧開發 有興趣的朋友可以掃下方二維碼關注我的公眾號 —— 愛寫bugger的阿拉斯加
分享 web 開發相關的技術文章，熱點資源，全棧程序員的成長之路。
大家一起交流成長。
只要關注公眾號并回復 福利 便送你六套視頻資源： Python、Java、Linux、Go、vue、react、javaScript
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97684.html
摘要：異步任務必須指定回調函數，當異步任務從任務隊列回到執行棧，回調函數就會執行。事件循環主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為。事件循環事件循環是指主線程重復從消息隊列中取消息執行的過程。 參考鏈接：這一次，徹底弄懂 JavaScript 執行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...
摘要：在中渲染樹中的每個節點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區域通常是和一個節點的盒模型相對應。坐標系統是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區域。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 ...
摘要：在中渲染樹中的每個節點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區域通常是和一個節點的盒模型相對應。坐標系統是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區域。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 ...
摘要：在中渲染樹中的每個節點即是一個渲染器或者渲染器對象。計算的樣式每個渲染器對象代表一個矩形區域通常是和一個節點的盒模型相對應。坐標系統是相對于根渲染器的。根渲染器的定位為和大小即為瀏覽器窗口的可視化部分比如。渲染器作廢其在屏幕上的矩形區域。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 ...
摘要：譯者注翻譯一個對新手比較友好的工作原理解析系列文章注意以下全部是概念經驗豐富的老鳥可以離場啦正文從這里開始隨著的流行團隊們正在利用來支持多個級別的技術棧包括前端后端混合開發嵌入式設備以及更多這篇文章旨在成為深入挖掘和實際上他是怎么工作的系列 譯者注 翻譯一個對新手比較友好的 JavaScript 工作原理解析系列文章 注意: 以下全部是概念,經驗豐富的老鳥可以離場啦 正文從這里開始 隨...
閱讀 1684·2021-09-26 09:55
閱讀 3713·2021-09-22 15:31
閱讀 7328·2021-09-22 15:12
閱讀 2209·2021-09-22 10:02
閱讀 4625·2021-09-04 16:40
閱讀 1031·2019-08-30 15:55
閱讀 3018·2019-08-30 12:56
閱讀 1813·2019-08-30 12:44
