obsidian-performance-tuning

What this skill does

# Obsidian Performance Tuning

## Overview

Optimize Obsidian plugin performance for large vaults (10,000+ files): profile bottlenecks with DevTools, implement lazy initialization, process files in batches with UI yielding, use LRU caches with bounded memory, debounce event handlers, and optimize DOM rendering with virtual scrolling and DocumentFragment.

## Prerequisites

- Working Obsidian plugin with at least one performance concern
- Developer Console access (Ctrl+Shift+I / Cmd+Option+I)
- Understanding of async JavaScript and the event loop

## Performance Benchmarks

| Metric | Good | Warning | Critical |
|--------|------|---------|----------|
| Plugin load time (`onload`) | < 100ms | 100-500ms | > 500ms |
| Command execution | < 50ms | 50-200ms | > 200ms |
| Single file operation | < 10ms | 10-50ms | > 50ms |
| Memory increase on load | < 10MB | 10-50MB | > 50MB |
| Event handler execution | < 5ms | 5-20ms | > 20ms |

## Instructions

### Step 1: Profile with DevTools Performance Tab

```typescript
// Add timing instrumentation to identify bottlenecks
export default class MyPlugin extends Plugin {
  async onload() {
    const loadStart = performance.now();

    await this.loadSettings();
    console.log(`[perf] loadSettings: ${(performance.now() - loadStart).toFixed(1)}ms`);

    const indexStart = performance.now();
    await this.buildIndex();
    console.log(`[perf] buildIndex: ${(performance.now() - indexStart).toFixed(1)}ms`);

    const cmdStart = performance.now();
    this.registerCommands();
    console.log(`[perf] registerCommands: ${(performance.now() - cmdStart).toFixed(1)}ms`);

    console.log(`[perf] total onload: ${(performance.now() - loadStart).toFixed(1)}ms`);
  }
}
```

For deeper analysis, use the DevTools Performance tab:

1. Open DevTools (Ctrl+Shift+I)
2. Go to Performance tab
3. Click Record
4. Toggle your plugin off/on in Settings > Community Plugins
5. Stop recording
6. Look for long tasks (yellow bars > 50ms) in the flame chart

### Step 2: Lazy Initialization — Defer Expensive Work

```typescript
// BAD: build index on load (blocks startup)
async onload() {
  this.index = await this.buildFullIndex(); // 2 seconds on large vaults
}

// GOOD: lazy — build on first use
export default class MyPlugin extends Plugin {
  private _index: Map<string, string[]> | null = null;
  private indexPromise: Promise<Map<string, string[]>> | null = null;

  async getIndex(): Promise<Map<string, string[]>> {
    if (this._index) return this._index;
    if (!this.indexPromise) {
      this.indexPromise = this.buildFullIndex().then(idx => {
        this._index = idx;
        this.indexPromise = null;
        return idx;
      });
    }
    return this.indexPromise;
  }

  async onload() {
    // Register commands immediately — index builds on first command use
    this.addCommand({
      id: 'search',
      name: 'Search indexed notes',
      callback: async () => {
        const index = await this.getIndex(); // builds on first call only
        // ... use index
      },
    });
  }

  private async buildFullIndex(): Promise<Map<string, string[]>> {
    const index = new Map<string, string[]>();
    const files = this.app.vault.getMarkdownFiles();
    for (const file of files) {
      const cache = this.app.metadataCache.getFileCache(file);
      if (cache?.tags) {
        index.set(file.path, cache.tags.map(t => t.tag));
      }
    }
    return index;
  }
}
```

### Step 3: Batch File Processing with UI Yielding

```typescript
import { TFile, Notice } from 'obsidian';

async processAllFiles(statusEl?: HTMLElement): Promise<number> {
  const files = this.app.vault.getMarkdownFiles();
  const BATCH_SIZE = 50;
  let processed = 0;

  for (let i = 0; i < files.length; i += BATCH_SIZE) {
    const batch = files.slice(i, i + BATCH_SIZE);

    for (const file of batch) {
      // Use cachedRead — avoids hitting disk on every call
      const content = await this.app.vault.cachedRead(file);
      this.processContent(file, content);
      processed++;
    }

    // Yield to UI thread — prevents "not responding" dialog
    await sleep(0);

    // Update progress
    if (statusEl) {
      const pct = Math.round((processed / files.length) * 100);
      statusEl.setText(`Processing: ${pct}% (${processed}/${files.length})`);
    }
  }

  return processed;
}

// Helper: Obsidian exports sleep(), or use this
function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}
```

### Step 4: LRU Cache for Bounded Memory

```typescript
// src/services/lru-cache.ts
export class LRUCache<K, V> {
  private cache = new Map<K, V>();

  constructor(private maxSize: number) {}

  get(key: K): V | undefined {
    const value = this.cache.get(key);
    if (value !== undefined) {
      // Move to end (most recently used)
      this.cache.delete(key);
      this.cache.set(key, value);
    }
    return value;
  }

  set(key: K, value: V) {
    this.cache.delete(key); // remove if exists (reinserts at end)
    this.cache.set(key, value);
    if (this.cache.size > this.maxSize) {
      // Evict oldest (first) entry
      const oldest = this.cache.keys().next().value;
      if (oldest !== undefined) this.cache.delete(oldest);
    }
  }

  has(key: K): boolean { return this.cache.has(key); }
  delete(key: K): boolean { return this.cache.delete(key); }
  clear() { this.cache.clear(); }
  get size(): number { return this.cache.size; }
}

// Usage: cache processed file results by mtime
class FileProcessor {
  private cache = new LRUCache<string, { mtime: number; result: string }>(500);

  async process(file: TFile): Promise<string> {
    const cached = this.cache.get(file.path);
    if (cached && cached.mtime === file.stat.mtime) {
      return cached.result; // cache hit — skip expensive processing
    }

    const content = await this.app.vault.cachedRead(file);
    const result = this.expensiveTransform(content);
    this.cache.set(file.path, { mtime: file.stat.mtime, result });
    return result;
  }
}
```

### Step 5: Debounce and Throttle Event Handlers

```typescript
import { Plugin, TFile, debounce } from 'obsidian';

export default class MyPlugin extends Plugin {
  // Global debounce: runs 500ms after last modify event
  private handleModify = debounce(
    (file: TFile) => {
      const cache = this.app.metadataCache.getFileCache(file);
      if (cache?.frontmatter?.tracked) {
        this.reindexFile(file);
      }
    },
    500,
    true // trailing edge
  );

  // Per-file debounce: separate timer for each file
  private fileTimers = new Map<string, ReturnType<typeof setTimeout>>();

  private debouncedPerFile(file: TFile, fn: () => void, delay = 1000) {
    const existing = this.fileTimers.get(file.path);
    if (existing) clearTimeout(existing);
    this.fileTimers.set(file.path, setTimeout(() => {
      this.fileTimers.delete(file.path);
      fn();
    }, delay));
  }

  async onload() {
    this.registerEvent(
      this.app.vault.on('modify', (file) => {
        if (file instanceof TFile && file.extension === 'md') {
          this.handleModify(file);
        }
      })
    );
  }

  onunload() {
    for (const timer of this.fileTimers.values()) clearTimeout(timer);
    this.fileTimers.clear();
  }
}
```

### Step 6: Optimize DOM Rendering

```typescript
// BAD: updating DOM on every event
this.registerEvent(this.app.vault.on('modify', () => {
  this.containerEl.empty();
  this.renderFullList(); // re-renders 1000 items on every keystroke
}));

// GOOD: DocumentFragment for batch DOM updates
private renderFileList(container: HTMLElement, files: TFile[]) {
  const fragment = document.createDocumentFragment();
  for (const file of files) {
    const el = document.createElement('div');
    el.className = 'file-item';
    el.textContent = file.basename;
    el.addEventListener('click', () => {
      this.app.workspace.getLeaf().openFile(file);
    });
    fragment.appendChild(el);
  }
  container.empty();
  container