JS代碼優化工具Prepack

 

　　最近，Facebook 發佈 Prepack :一個優化 JavaScript 源代碼的工具，實際上它是一個 JavaScript 部分求值器(Partvaluator)，可在編譯時執行本來在運行時的計算過程，並經過重寫 JavaScript 代碼來提升其執行效率。(西安尚學堂）

　　Prepack 用簡單的賦值序列來等效替換 JavaScript 代碼包中的全局代碼，從而消除了中間計算過程以及對象分配的操做。對於重初始化的代碼，Prepack能夠有效緩存JavaScript解析的結果，優化效果最佳。

 

　　下面五個概念能夠幫咱們更好的理解 Prepack 運行機制：

　　抽象語法樹(AST)Prepack運行在AST級別，使用Babel解析並生成JavaScript源代碼。

 

　　具體執行(Concrete Execution)Prepack 核心是一個JavaScript解釋器，它與ECMAScript 5幾乎徹底兼容，並且緊密地保持與ECMAScript 2016語言規範的一致性，你能夠將Prepack中的解釋器視爲徹底參照JavaScript實現的。解釋器可以跟蹤並撤銷包括全部對象Mutation在內的結果，從而可以進行推測優化(Speculative Optimization)。

 

　　符號執行(Symbolic Execution)除了對具體值進行計算外，Prepack的解釋器還能夠操做受環境相互做用影響的抽象值。例如Date.now能夠返回一個抽象值，你能夠經過helper輔助函數(如__abstract())手動注入抽象值。Prepack會跟蹤全部在抽象值上執行的操做，在遇到分支時，Prepack會執行並探索全部可能性。因此，Prepack實現了一套JavaScript的符號執行引擎。

 

　　抽象釋義(Abstract Interpretation)符號執行在遇到抽象值的分支時會分叉(fork)，Prepack會在控制流合併點加入分歧執行(Diverged Execution)來實現抽象釋義的形式。鏈接變量和堆屬性可能會獲得條件抽象值，Prepack會跟蹤有關抽象值和型域(Type Domain)的信息。

 

　　堆序列化(Heap Serialization)當全局代碼返回，初始化階段結束時，Prepack捕獲最終的堆並按順序排列堆棧，生成直觀的JavaScript新代碼，建立並連接初始化堆中可訪問的全部對象。堆中的一些值多是抽象值的計算結果，對於這些值，Prepack將生成原始程序完成計算所執行的代碼。

 

　　如下是官方提供的Prepack優化示例：

　　

/* 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團隊對將來的規劃以下：

　　一、短時間

　　穩定現有功能集，用於預優化(Prepack)React Native代碼包

　　集成React Native工具鏈

　　根據React Native所用模塊系統的假設來構建優化

　　二、中期

　　進一步優化序列化(Serialization)，包括：消除不暴露特性(identity)的對象;消除未使用的導出屬性，等等

　　預優化每一個函數、基本代碼塊、語句、表達式

　　與ES6保持徹底一致

　　支持普遍的模塊系統

　　假設ES6支持某些功能，延遲完成或直接忽略Polyfill應用

　　進一步實現Web和Node.js環境中的兼容性目標

　　深刻集成JavaScript虛擬機，改進堆反序列化過程，包括 ：暴露「對象懶初始化」的概念 - 以一種JavaScript無感知的方式，在首次使用對象時對其進行初始化;經過專門的字節碼提升普通對象建立的編碼效率;將代碼分爲兩個階段：1) 非環境依賴階段，虛擬機能夠安全地捕獲並恢復生成的堆;2)環境依賴階段，經過從環境中得到的值執行全部剩餘的計算過程來拼湊具體的堆，等等

　　總結循環和遞歸

　　三、長期 - 利用Prepack做爲一個平臺

　　JavaScript Playground - 經過調整JavaScript引擎體驗JavaScript特性，這些引擎由JavaScript所編寫，託管在瀏覽器中;你能夠把它想象成一個「Babel虛擬機」，實現了不能被編譯的JavaScript新特性

　　捕捉Bug - 發現異常崩潰、執行問題……

　　效果分析，例如檢測模塊工廠函數可能的反作用或強制純淨註釋