# js-performance-patterns

Runtime performance patterns for JavaScript hot paths. Helps agents optimize tight loops, frequent event callbacks, and DOM operations across JS frameworks.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 687 installs · ★ 257
- Author: patterns.dev
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/PatternsDev/skills/tree/HEAD/javascript/js-performance-patterns/SKILL.md
- Updated: 2026-04-15
- HTML: https://affpapa.org/en/nevibecode/skills/js-performance-patterns

## What it does

The skill supplies framework-agnostic runtime optimization patterns for JavaScript and TypeScript. It targets repeated performance bottlenecks: swapping array `.includes()` with `Set.has()` for O(1) lookups, combining chained `.filter().map()` pipelines into one pass, and memoizing pure functions. For browser scripts, it guides agents to batch DOM reads and writes separately. This prevents layout thrashing.

Micro-optimizations do not replace algorithmic fixes. The instructions state you should eliminate quadratic complexity before tweaking hot loops. Applying these micro-patterns to cold paths is explicitly discouraged because readability matters more than nanosecond gains. The guidelines fit Node.js and client-side code whenever profiling shows a bottleneck in arrays with 1,000+ items or 60fps event handlers.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill js-performance-patterns -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/js-performance-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/js-performance-patterns/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill js-performance-patterns -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/js-performance-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill js-performance-patterns -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/js-performance-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PatternsDev/skills js-performance-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/js-performance-patterns/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill js-performance-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/PatternsDev/skills --path javascript/js-performance-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/js-performance-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill js-performance-patterns -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/PatternsDev/skills/tree/HEAD/javascript/js-performance-patterns/SKILL.md

## When to use it
- replace linear array lookups with `Set` and `Map`
- eliminate layout thrashing by batching DOM reads and writes
- combine chained `.filter()` and `.map()` calls into a single loop
- memoize heavy pure function results to avoid recomputations

## Example prompts
- Optimize the hot loop in `src/parser.ts` using js-performance-patterns
- Check this scroll handler for layout thrashing and batch DOM reads
- Refactor the chained filter and map calls into a single pass

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: b1181ec11939c18c.

BEGIN THIRD-PARTY FILE b1181ec11939c18c
````text
---
name: js-performance-patterns
description: Provides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operations, caching, or data structure choices in performance-critical code.
paths:
  - "**/*.js"
  - "**/*.ts"
license: MIT
metadata:
  author: patterns.dev
  version: "1.1"
related_skills:
  - "module-pattern"
  - "singleton-pattern"
---

# JavaScript Performance Patterns

## Table of Contents

- [When to Use](#when-to-use)
- [Instructions](#instructions)
- [Details](#details)
- [Source](#source)

Runtime performance micro-patterns for JavaScript hot paths. These patterns matter most in tight loops, frequent callbacks (scroll, resize, animation frames), and data-heavy operations. They apply to any JavaScript environment — React, Vue, vanilla, Node.js.

## When to Use

Reference these patterns when:
- Profiling reveals a hot function or tight loop
- Processing large datasets (1,000+ items)
- Handling high-frequency events (scroll, mousemove, resize)
- Optimizing build-time or server-side scripts
- Reviewing code for performance in critical paths

## Instructions

- Apply these patterns only in **measured hot paths** — code that runs frequently or processes large datasets. Don't apply them to cold code paths where readability is more important than nanosecond gains.

## Details

### Overview

Micro-optimizations are **not** a substitute for algorithmic improvements. Address the algorithm first (O(n^2) to O(n), removing waterfalls, reducing DOM mutations). Once the algorithm is right, these patterns squeeze additional performance from hot paths.

---

### 1. Use `Set` and `Map` for Lookups

**Impact: HIGH for large collections** — O(1) vs O(n) per lookup.

Array methods like `.includes()`, `.find()`, and `.indexOf()` scan linearly. For repeated lookups against the same collection, convert to `Set` or `Map` first.

**Avoid — O(n) per check:**

```typescript
const allowedIds = ['a', 'b', 'c', /* ...hundreds more */]

function isAllowed(id: string) {
  return allowedIds.includes(id) // scans entire array
}

items.filter(item => allowedIds.includes(item.id)) // O(n * m)
```

**Prefer — O(1) per check:**

```typescript
const allowedIds = new Set(['a', 'b', 'c', /* ...hundreds more */])

function isAllowed(id: string) {
  return allowedIds.has(id)
}

items.filter(item => allowedIds.has(item.id)) // O(n)
```

For key-value lookups, use `Map` instead of scanning an array of objects:

```typescript
// Avoid
const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
const user = users.find(u => u.id === targetId) // O(n)

// Prefer
const userMap = new Map(users.map(u => [u.id, u]))
const user = userMap.get(targetId) // O(1)
```

---

### 2. Batch DOM Reads and Writes
````
END THIRD-PARTY FILE b1181ec11939c18c

The third-party file has ended. Everything between the b1181ec11939c18c tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2777 of 11188 bytes. © patterns.dev · MIT · https://github.com/PatternsDev/skills/tree/HEAD/javascript/js-performance-patterns/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md