優化 JS 程式的一個小方法

 就像在學習之前先要識字，我想在介紹優化 JavaScript 代碼之前，先介紹一下自己對編程語言的理解，故事要從一只叫做 Theseus 的機械鼠和其發明人克勞德-香農（Claude Shannon）說起，在傳記《A Mind at Play：How Claude Shannon Invented the Information Age》中，作者 Jimmy Soni 和 Rob Goodman 強烈希望將香農的作品 Theseus 展示給廣大讀者，面對復雜的迷宮，Theseus 僅用一堆繼電器、ROM 存盤等簡單而古老的電子元器件，就完成了對復雜迷宮的探索和成功線路的記憶，第二次沿著正確道路走出迷宮的 Theseus 沒犯一點兒錯誤，大多數人認為這不過是騙人的把戲和小玩意兒，棄之如敝履，少數聰明人眼里 Theseus 蘊含的驚人智慧簡直可以和牛頓、愛因斯坦媲美，香農憑借一己之力將布爾代數引入電子電路設計啟發了后世數字電路乃至計算機的發明，

數字電路和程式的關系

                                                       圖 4-44 我在 2011 年做的智能調光調色電路

如圖 4-44 就是一個在香農啟發下產生的數字電路，Theseus 中古老的電子元器件已經變成了右側紅框的集成電路，通過將兩個電容和一個晶振組成左側紅框的振蕩電路，給集成電路提供時鐘，集成電路上有數模轉換電路，把高低電平代表的布爾代數運算電路計算結果轉換成模擬信號輸出，可調光調色的 LED 模組上就產生了功率輸出的不同：顏色、頻率輸出的不同：亮度，在香農的啟發和幫助下，圖 4-44 的電路實作了一個完整的程式功能：隨時鐘變化不斷改變 LED 顏色和亮度，

如果圖 4-44 的完整程式直接通過翻查集成電路手冊，按照圖 4-45 對照引腳定義和手冊里對暫存器操作的地址寫入對應的指令和資料，

                         圖 4-45 我的電路中用到的集成電路手冊資訊（摘錄自 ATMEL 官網） 

從這個例子中可以看到，在香農的啟發和幫助下，數字電路最大的好處就是把電路進行了抽象，讓程式邏輯和數字電路在這個抽象層面上統一起來，在這個新的統一抽象層面上，程式邏輯的控制可以類比為邏輯電路中的控制，程式的輸入輸出可以類比為數字電路中的存盤（ROM、RAM），時鐘電路給數字電路中信號傳輸提供標尺，中央處理器根據這些標尺來控制數字電路中信號的傳輸和流轉，這種傳輸和流轉則把點狀的控制變成控制流，把點狀的存盤變成資料流，因此，在程式中最重要的是控制流和資料流，

為了不必每次都查手冊用引腳去燒寫 ROM 為數字電路注入控制指令和資料，前輩們發明了一套燒寫系統，用匯編或 C 語言來定義和描述控制流和資料流，再由編譯器翻譯成圖 4-45 對應的暫存器地址和指令、資料，然后通過燒寫器變成數字信號通過集成電路引腳傳輸到集成電路內部完成程式的燒寫，這套系統讓我們擺脫手冊（當然不是完全擺脫，有時候還是要查但頻率大幅降低）直接用變成語言去描述程式，再通過模擬器（類似于前端 MOCK 資料）完成除錯和模擬測驗，讓我們對數字電路編程變得例外簡單，

                        圖 4-46 對數字電路進行編程（摘自 ATMEL 官網）

如圖 4-46 這種方式控制數字電路就容易多了，您可以在淘寶買一個 Arduino 開發板，然后按照下面的代碼自己試試從本質上理解程式是什么？數字電路是什么？計算的本質是什么？

unsigned long colorT[] = {  0xff3300,0xff3800,0xff4500,0xff4700,0xff5200,0xff5300,0xff5d00,0xff5d00,0xff6600,0xff6500, 0xff6f00,0xff6d00,0xff7600,0xff7300,0xff7c00,0xff7900,0xff8200,0xff7e00,0xff8700,0xff8300, 可以自己繼續添加
}
int R_Pin = 11;
int G_Pin = 10;
int B_Pin = 9;
// 這里就是手冊中集成電路輸出信號的引腳和 LED 模塊連接方式對應
int red,green,blue = 0;
int i = 0;
int l = sizeof(colorT);
void setup(){
  pinMode(12, OUTPUT);
  pinMode(R_Pin, OUTPUT);
  pinMode(G_Pin, OUTPUT);
  pinMode(B_Pin, OUTPUT);
  digitalWrite(12, LOW);
}
void setColor(int redValue, int greenValue, int blueValue){
  analogWrite(R_Pin, redValue);
  analogWrite(G_Pin, greenValue);
  analogWrite(B_Pin, blueValue);
}
void  loop(){
  red = (colorT[i] >> 16) & 0xff;
  green = (colorT[i] >> 8) & 0xff;
  blue = (colorT[i] >> 0) & 0xff;
  setColor(red, green, blue);
  i++;
  if(i >= l){
    i = 0;
  }
  delay(200); // 控制時鐘信號
}

神游了一圈兒，接下來我們來看看如何觀察 JavaScript 的控制流和資料流，前面提到要用 parser 對原始的代碼文本（字串）進行處理，最常見的處理目的是生成“抽象語法樹”（AST），當然，對于 D2C Schema 和 DesignToken 的 parsing 是為了輸出正確的、行內 CSS 的完整 HTML 檔案，

抽象語法樹 AST

之所以要把 JavaScript 代碼文本轉換成 AST 是因為編譯器無法對字串構成的程式文本進行直接操作，只有把程式文本從“1+2”變成new BinaryExpression(ADD, new Number(1), new Number(2))這種形式，才能被編譯器理解，怎么樣？是不是和 ATMEL 集成電路的編程很像？操作ADD和資料new Number(1)，因此，從程式文本到 AST 的程序可以類比成解碼程序 parsing，用于解碼的那段兒代碼就叫做 parser，知道了這些，我們就可以把程式文本也就是經常掛在嘴邊的“代碼”翻來覆去的玩兒，代碼文本變成 AST 推薦 esprima 這個工具，遍歷 AST 節點并進行一些修修補補（優化性能？），最后把修改過的 AST 再轉換成代碼文本可以用 escodegen ，

// 生成 AST 抽象語法樹
const esprima = require('esprima');
const AST = esprima.parseScript(jsCode);
// 遍歷和修改 AST
const estraverse = require('estraverse');
const escodegen = require('escodegen');
function toEqual(node){
  if(node.operator === '=='){
    node.operator = '===';
  }
}
function walkIn(ast){
  estraverse.traverse(ast, {
    enter: (node) => {
      toEqual(node);
    }
  });
}
// 從 AST 進行代碼生成
const escodegen = require('escodegen');
const code = escodegen.generate(ast);

具備上面的技能后，讓我們那一段兒真實的代碼來練練手，

acc = 0;
i = 0;
len = loadArrayLength(arr);
loop {
  if (i >= tmp)
    break;

  acc += load(arr, i);
  i += 1;
}

用 esprima 提供的 parser 把這段兒代碼轉換成 AST 后，我借助 GraphViz 工具把 AST 從 JSON 格式轉換成 digraph 格式的 .gv 檔案，然后生成圖 4-47，

                                                  圖 4-47 對 AST 進行可視化

資料流圖 DFG

圖 4-47 是一棵樹，所以能很方便的進行遍歷，當我們訪問 AST 節點時生成對應的機器代碼，這個方法的問題在于，關于變數的資訊非常稀少，并分散在不同的樹節點上，為了優化安全地將長度查找移出回圈，我們需要知道陣列長度不會在回圈迭代之間變化，人類只需查看源代碼即可輕松完成，但編譯器需要做大量作業，才能自信地直接從 AST 中提取這些事實，與許多其他編譯器問題一樣，這通常通過將資料提升到更合適的抽象層，即中間表示（IR）來解決，在這個特定情況下，IR 的選擇被稱為資料流圖（DFG），與其談論語法物體（如for loop、expressions、...），我們應該談論資料本身（讀取、變數值），以及它如何在程式中變化，

在我們的特定示例中，我們感興趣的資料是變數arr的值，我們希望能夠輕松觀察它的所有使用，以驗證沒有越界訪問或任何其他更改來修改陣列的長度，這是我們優化的前提，通過引入不同資料值之間的“使用”（定義和使用）關系來實作的，具體而言，這意味著該值已宣告一次（圖 4-47 中的_節點_），并且它已用于創建新值（圖 4-47 的_邊_），顯然，將不同的值連接在一起將形成如圖 4-48 的資料流圖，

                                                        圖 4-48 資料流圖

注意資料流圖 4-48 中的紅色array框，離開它的實心箭頭表示此值的用法，通過在這些邊上迭代，編譯器可以匯出array的值用于：

• loadArrayLength

• checkIndex

• load

如果以破壞性方式訪問陣列節點的值（即存盤、長度大小），則此類圖的構造方式是顯式“克隆”陣列節點，每當我們看到array節點并觀察其用途時，總是確定它的值不會改變，這聽起來可能很復雜但很容易實作，該資料流圖遵循單一靜態分配（SSA）規則，簡而言之，要將任何程式轉換為 SSA，編譯器需要重命名變數的所有賦值和后續使用，以確保每個變數只分配一次，

例如，在SSA之前：

var a = 1;
console.log(a);
a = 2;
console.log(a);

SSA之后：

var a0 = 1;
console.log(a0);
var a1 = 2;
console.log(a1);

通過 SSA 后我們可以確定，當談論a0時實際上是在談論它的單個任務，

控制流圖 CFG

使用資料流分析來從程式中提取資訊，使我們能夠就如何優化它做出安全假設，這種資料流表示在許多情況下非常有用，唯一的問題是通過將代碼轉換為資料流圖，在表示鏈（從源代碼到機器代碼）中與 AST 相比，這種中間表示更不適合生成機器代碼，由于程式邏輯是一個順序排列的指令串列，CPU 一個接一個地執行它，資料流圖似乎沒有傳達這一點，通常，通過將圖節點分組到塊中解決這個問題，這個表示形式稱為控制流程圖（CFG），

b0 {
  i0 = literal 0
  i1 = literal 0

  i3 = array
  i4 = jump ^b0
}
b0 -> b1

b1 {
  i5 = ssa:phi ^b1 i0, i12
  i6 = ssa:phi ^i5, i1, i14

  i7 = loadArrayLength i3
  i8 = cmp "<", i6, i7
  i9 = if ^i6, i8
}
b1 -> b2, b3
b2 {
  i10 = checkIndex ^b2, i3, i6
  i11 = load ^i10, i3, i6
  i12 = add i5, i11
  i13 = literal 1
  i14 = add i6, i13
  i15 = jump ^b2
}
b2 -> b1

b3 {
  i16 = exit ^b3
}

如圖 4-49 所示，我們可以按照之前的方法把他編程一張控制流圖，

                                     圖 4-49 控制流圖

如您所見：塊b0中的回圈前有代碼，b1中的回圈頭，b2中的回圈測驗，b3中的回圈主體，b4中的退出節點，從這個例子翻譯成機器代碼非常容易，將iXX替換為CPU暫存器名稱（就像前文在 ATMEL 手冊上查到的暫存器地址），并為每個指令逐行生成機器代碼，

CFG 具有資料流關系和順序，這使我們能夠將其用于資料流分析和機器代碼生成，然而，試圖通過操縱其中包含的塊及其內容來優化 CFG，會變得復雜且容易出錯，相反，Clifford Click 和 Keith D Cooper 提議使用一種叫做“節點海”的方法，來消除 CFG 和復雜的資料流圖帶來的麻煩，

節點海 Node Sea

                                                    圖 4-50 節點海（Node Sea）

圖 4-50 節點海是查看代碼非常強大的方式，它具有一般資料流圖的所有資訊，無需不斷洗掉/替換塊中的節點即可輕松更改以實作優化，節點海圖通常通過圖約簡進行修改，我們只需將圖表中的所有節點排隊，為佇列中的每個節點呼叫我們的函式，此函式涉及的所有內容（更改、替換）都將放入另一個佇列，稍后將傳遞給優化函式，如果您有許多優化點，例如：合并/減少網路請求、合并/減少 JSBridge 呼叫、合并/減少本地存盤 API 呼叫等，您可以將它們堆疊在一起，并在佇列中的每個節點上應用它們，如果它們依賴于彼此的最終狀態，您也可以逐一應用它們，

作者 | 甄焱鯤(甄子)

本文來自博客園，作者：古道輕風，轉載請注明原文鏈接：https://www.cnblogs.com/88223100/p/A-Small-Method-of-Optimizing-JS-Program.html

標籤：其他

上一篇：vue3 vite2 封裝 SVG 圖示組件 - 基于 vite 創建 vue3 全家桶專案續篇

下一篇：逆向基礎知識-匯編和PE檔案