Unlock JavaScript Performance: From AST to Control Flow Graphs Explained

Before optimizing JavaScript, the author reflects on programming language fundamentals using the story of Theseus, a mechanical mouse created by Claude Shannon, to illustrate how simple electronic components can solve complex problems.

Digital Circuit and Program Relationship

The author describes a digital circuit (Figure 4‑44) that combines capacitors, a crystal oscillator, and an integrated circuit to generate clock signals, perform Boolean algebra calculations, and output analog signals that control LED color and brightness, effectively implementing a complete program.

Figure 4‑45 shows the ATmega datasheet excerpt used to map pins and registers for programming the circuit.

Arduino Example for Digital Circuit Programming

<code>unsigned long colorT[] = { 0xff3300,0xff3800,0xff4500,0xff4700,0xff5200,0xff5300,0xff5d00,0xff5d00,0xff6600,0xff6500,0xff6f00,0xff6d00,0xff7600,0xff7300,0xff7c00,0xff7900,0xff8200,0xff7e00,0xff8700,0xff8300, /* add more colors */ };
int R_Pin = 11;
int G_Pin = 10;
int B_Pin = 9;
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); // control clock signal
}
</code>

JavaScript Control Flow and Data Flow

To analyze JavaScript code, a parser converts source text into an Abstract Syntax Tree (AST). The AST represents code structures such as binary expressions, enabling further transformations. The author recommends the

esprima

library for parsing and

escodegen

for generating code from a modified AST.

<code>const esprima = require('esprima');
const AST = esprima.parseScript(jsCode);
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);
    }
  });
}
const code = escodegen.generate(ast);
</code>

Figure 4‑47 visualizes the AST using GraphViz.

Data Flow Graph (DFG)

The DFG abstracts program behavior by focusing on how data values flow and are used, rather than on syntactic constructs. Using the variable

arr

as an example, the DFG shows definitions and uses such as

loadArrayLength

,

checkIndex

, and

load

. This representation follows SSA rules, ensuring each variable is assigned only once.

Figure 4‑48 shows the DFG with highlighted usage edges.

Static Single Assignment (SSA)

SSA renames each variable assignment to a unique identifier, simplifying data flow analysis. Example before SSA:

<code>var a = 1;
console.log(a);
a = 2;
console.log(a);
</code>

After SSA transformation:

<code>var a0 = 1;
console.log(a0);
var a1 = 2;
console.log(a1);
</code>

Control Flow Graph (CFG)

The CFG represents program execution order as basic blocks linked by jumps. The author provides a textual CFG example and visualizes it (Figure 4‑49).

<code>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
}
</code>

Figure 4‑49 illustrates the CFG.

Node Sea Concept

Extending the DFG idea, the “Node Sea” visualizes control dependencies as dashed edges, allowing easy modification of the graph for optimizations such as merging network requests or reducing JSBridge calls. By queuing nodes and applying transformation functions, complex optimization pipelines become manageable.

Figure 4‑50 shows the Node Sea representation.