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