?

　　最近，Facebook 發(fā)布?Prepack?:一個(gè)優(yōu)化 JavaScript 源代碼的工具，實(shí)際上它是一個(gè) JavaScript 部分求值器(Partvaluator)，可在編譯時(shí)執(zhí)行原本在運(yùn)行時(shí)的計(jì)算過程，并通過重寫 JavaScript 代碼來(lái)提高其執(zhí)行效率。(西安尚學(xué)堂）

　　Prepack 用簡(jiǎn)單的賦值序列來(lái)等效替換 JavaScript 代碼包中的全局代碼，從而消除了中間計(jì)算過程以及對(duì)象分配的操作。對(duì)于重初始化的代碼，Prepack可以有效緩存JavaScript解析的結(jié)果，優(yōu)化效果最佳。

?

　　下面五個(gè)概念可以幫我們更好的理解 Prepack 運(yùn)行機(jī)制：

　　抽象語(yǔ)法樹(AST)Prepack運(yùn)行在AST級(jí)別，使用Babel解析并生成JavaScript源代碼。

?

　　具體執(zhí)行(Concrete Execution)Prepack 核心是一個(gè)JavaScript解釋器，它與ECMAScript 5幾乎完全兼容，而且緊密地保持與ECMAScript 2016語(yǔ)言規(guī)范的一致性，你可以將Prepack中的解釋器視為完全參照J(rèn)avaScript實(shí)現(xiàn)的。解釋器能夠跟蹤并撤銷包括所有對(duì)象Mutation在內(nèi)的結(jié)果，從而能夠進(jìn)行推測(cè)優(yōu)化(Speculative Optimization)。

?

　　符號(hào)執(zhí)行(Symbolic Execution)除了對(duì)具體值進(jìn)行計(jì)算外，Prepack的解釋器還可以操作受環(huán)境相互作用影響的抽象值。例如Date.now可以返回一個(gè)抽象值，你可以通過helper輔助函數(shù)(如__abstract())手動(dòng)注入抽象值。Prepack會(huì)跟蹤所有在抽象值上執(zhí)行的操作，在遇到分支時(shí)，Prepack會(huì)執(zhí)行并探索所有可能性。所以，Prepack實(shí)現(xiàn)了一套JavaScript的符號(hào)執(zhí)行引擎。

?

　　抽象釋義(Abstract Interpretation)符號(hào)執(zhí)行在遇到抽象值的分支時(shí)會(huì)分叉(fork)，Prepack會(huì)在控制流合并點(diǎn)加入分歧執(zhí)行(Diverged Execution)來(lái)實(shí)現(xiàn)抽象釋義的形式。連接變量和堆屬性可能會(huì)得到條件抽象值，Prepack會(huì)跟蹤有關(guān)抽象值和型域(Type Domain)的信息。

?

　　堆序列化(Heap Serialization)當(dāng)全局代碼返回，初始化階段結(jié)束時(shí)，Prepack捕獲最終的堆并按順序排列堆棧，生成直觀的JavaScript新代碼，創(chuàng)建并鏈接初始化堆中可訪問的所有對(duì)象。堆中的一些值可能是抽象值的計(jì)算結(jié)果，對(duì)于這些值，Prepack將生成原始程序完成計(jì)算所執(zhí)行的代碼。

?

　　以下是官方提供的Prepack優(yōu)化示例：

　　

/* Hello World */// Input (function () {function hello() { return 'hello'; }function world() { return 'world'; }global.s = hello() + ' ' + world();})();// Output (function () {s = "hello world";})();/* 消除抽象稅 */// Input (function () {var self = this;['A', 'B', 42].forEach(function(x) {var name = '_' + x.toString()[0].toLowerCase();var y = parseInt(x);self[name] = y ? y : x;});})();// Output (function () {_a = "A";_b = "B";_4 = 42;})();

?

　　Prepack團(tuán)隊(duì)對(duì)未來(lái)的規(guī)劃如下：

　　1、短期

　　穩(wěn)定現(xiàn)有功能集，用于預(yù)優(yōu)化(Prepack)React Native代碼包

　　集成React Native工具鏈

　　根據(jù)React Native所用模塊系統(tǒng)的假設(shè)來(lái)構(gòu)建優(yōu)化

　　2、中期

　　進(jìn)一步優(yōu)化序列化(Serialization)，包括：消除不暴露特性(identity)的對(duì)象;消除未使用的導(dǎo)出屬性，等等

　　預(yù)優(yōu)化每個(gè)函數(shù)、基本代碼塊、語(yǔ)句、表達(dá)式

　　與ES6保持完全一致

　　支持廣泛的模塊系統(tǒng)

　　假設(shè)ES6支持某些功能，延遲完成或直接忽略Polyfill應(yīng)用

　　進(jìn)一步實(shí)現(xiàn)Web和Node.js環(huán)境中的兼容性目標(biāo)

　　深入集成JavaScript虛擬機(jī)，改進(jìn)堆反序列化過程，包括 ：暴露“對(duì)象懶初始化”的概念 - 以一種JavaScript無(wú)感知的方式，在首次使用對(duì)象時(shí)對(duì)其進(jìn)行初始化;通過專門的字節(jié)碼提高普通對(duì)象創(chuàng)建的編碼效率;將代碼分為兩個(gè)階段：1) 非環(huán)境依賴階段，虛擬機(jī)可以安全地捕獲并恢復(fù)生成的堆;2)環(huán)境依賴階段，通過從環(huán)境中獲得的值執(zhí)行所有剩余的計(jì)算過程來(lái)拼湊具體的堆，等等

　　總結(jié)循環(huán)和遞歸

　　3、長(zhǎng)期 - 利用Prepack作為一個(gè)平臺(tái)

　　JavaScript Playground - 通過調(diào)整JavaScript引擎體驗(yàn)JavaScript特性，這些引擎由JavaScript所編寫，托管在瀏覽器中;你可以把它想象成一個(gè)“Babel虛擬機(jī)”，實(shí)現(xiàn)了不能被編譯的JavaScript新特性

　　捕捉Bug - 發(fā)現(xiàn)異常崩潰、執(zhí)行問題……

　　效果分析，例如檢測(cè)模塊工廠函數(shù)可能的副作用或強(qiáng)制純凈注釋

轉(zhuǎn)載于:https://www.cnblogs.com/a31415926/p/6832199.html

總結(jié)

以上是生活随笔為你收集整理的JS代码优化工具Prepack的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。