Skip to content

Avoid allocating token arrays in Parser for simple declarations #74

@alanzabihi

Description

@alanzabihi

Hypothesis

The parser allocates a tokens array in other() that collects all tokens for a given statement, then passes this array to decl() or rule(). For simple CSS declarations like color: red; or margin: 10px;, this involves:

  1. Allocating an array in other()
  2. Pushing 3-5 tokens (prop, colon/space, value, semicolon)
  3. Passing array to decl()
  4. decl() iterates/splices the array

For simple declarations (the vast majority in typical CSS), skip the array entirely. Detect the common pattern inline: word, colon, value tokens, semicolon. Build the Declaration node directly from the token stream:

// In parse(), after getting a word token:
let next = this.tokenizer.nextToken()
if (next[0] === ':') {
  // Fast-path: this is a simple declaration
  let value = this.tokenizer.nextToken() // value token
  // Build Declaration directly without array allocation
}

This eliminates array allocation, push calls, and splice operations for the majority of CSS statements.

Editable surface

  • lib/parser.js — add fast-path for simple declarations that avoids token array allocation

What's different from prior work

Expected impact

METRIC_A improvement of 2-5ms (large file, thousands of simple declarations). METRIC_B improvement of 2-4ms. Combined 3-5ms.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions