1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// Measuring input delay in a web application
class ResponsivenessMonitor {
    private inputTimes: Map<string, number> = new Map();
    
    // Called when user interaction starts
    onInputStart(eventId: string) {
        this.inputTimes.set(eventId, performance.now());
    }
    
    // Called when visible response occurs
    onResponseRendered(eventId: string) {
        const startTime = this.inputTimes.get(eventId);
        if (startTime) {
            const inputDelay = performance.now() - startTime;
            
            // Classify the response
            if (inputDelay < 100) {
                console.log(`✅ Instant response: ${inputDelay.toFixed(1)}ms`);
            } else if (inputDelay < 300) {
                console.log(`⚠️ Slight lag: ${inputDelay.toFixed(1)}ms`);
            } else {
                console.log(`❌ Noticeable delay: ${inputDelay.toFixed(1)}ms`);
            }
            
            // Report to analytics
            this.reportMetric('input_delay', inputDelay);
        }
    }
}
 
// Web Vitals measurements for responsiveness
interface WebVitalsMetrics {
    FCP: number;   // First Contentful Paint (target: < 1.8s)
    LCP: number;   // Largest Contentful Paint (target: < 2.5s)
    FID: number;   // First Input Delay (target: < 100ms)
    INP: number;   // Interaction to Next Paint (target: < 200ms)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// Simple throughput measurement
class ThroughputMonitor {
    private completedOperations: number = 0;
    private startTime: number = Date.now();
    
    recordCompletion() {
        this.completedOperations++;
    }
    
    getOperationsPerSecond(): number {
        const elapsedSeconds = (Date.now() - this.startTime) / 1000;
        return this.completedOperations / elapsedSeconds;
    }
}
 
// Real-world throughput example: order processing system
interface ThroughputMetrics {
    ordersProcessedPerSecond: number;     // Primary metric
    peakOrdersPerSecond: number;          // Capacity planning
    averageOrdersPerHour: number;         // Business reporting
    ordersInBacklog: number;              // Health indicator
    
    // Derived metrics
    processingCapacityUsed: number;       // e.g., 75% of theoretical max
    headroomRemainingPercent: number;     // 25% capacity remaining
}
 
// Throughput calculation for batch processing
function calculateBatchThroughput(
    recordsProcessed: number,
    startTime: Date,
    endTime: Date
): BatchThroughput {
    const durationSeconds = (endTime.getTime() - startTime.getTime()) / 1000;
    const durationHours = durationSeconds / 3600;
    
    return {
        recordsPerSecond: recordsProcessed / durationSeconds,
        recordsPerHour: recordsProcessed / durationHours,
        totalDuration: durationSeconds,
        effectiveRate: recordsProcessed / durationSeconds
    };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// Example: Database writes - batching trade-off
 
// Approach 1: Optimize for responsiveness
// Each write executes immediately
async function writeImmediate(record: Record): Promise<void> {
    await database.insert(record);  // 5ms per write
}
// Latency: 5ms per record ✅
// Throughput: 200 records/second (1000ms / 5ms)
 
// Approach 2: Optimize for throughput  
// Batch writes for efficiency
class BatchWriter {
    private buffer: Record[] = [];
    private flushInterval = 100; // ms
    
    async write(record: Record): Promise<void> {
        this.buffer.push(record);
        // Record won't be written until batch flushes
    }
    
    async flush(): Promise<void> {
        if (this.buffer.length > 0) {
            // Batch insert: 10ms for up to 100 records
            await database.batchInsert(this.buffer);
            this.buffer = [];
        }
    }
}
// Latency: 0-100ms (wait for batch) + 10ms = up to 110ms ❌
// Throughput: 1000 records/second (10x improvement) ✅
 
// Approach 3: Balanced solution
// Small batches with short max wait
class BalancedWriter {
    private buffer: Record[] = [];
    private maxWait = 20; // ms
    private maxBatchSize = 20;
    
    async write(record: Record): Promise<void> {
        this.buffer.push(record);
        if (this.buffer.length >= this.maxBatchSize) {
            await this.flush();  // Immediate flush if batch full
        }
        // Otherwise, flush in background after maxWait
    }
}
// Latency: 0-20ms + 8ms = up to 28ms (acceptable)
// Throughput: 500 records/second (2.5x improvement)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// BEFORE: Single-threaded, UI blocks during heavy work
class ImageEditorBlocking {
    applyFilter(image: Image, filter: Filter): void {
        // 3 seconds of CPU work - UI completely frozen!
        const result = this.processPixels(image, filter);
        this.displayResult(result);
    }
}
 
// AFTER: Concurrent, UI remains responsive
class ImageEditorConcurrent {
    async applyFilter(image: Image, filter: Filter): Promise<void> {
        // Show immediate feedback
        this.showProgressIndicator();
        this.disableFilterButton();  // Prevent double-click
        
        // Move heavy work to background thread
        const result = await this.runInWorker(() => {
            return this.processPixels(image, filter);
        });
        
        // Update UI on main thread
        this.hideProgressIndicator();
        this.displayResult(result);
        this.enableFilterButton();
    }
    
    private runInWorker<T>(task: () => T): Promise<T> {
        return new Promise((resolve) => {
            const worker = new Worker('image-processor.js');
            worker.onmessage = (e) => resolve(e.data);
            worker.postMessage({ task: task.toString() });
        });
    }
}
 
// User experience comparison:
// Blocking: Click → Freeze 3s → Result
// Concurrent: Click → Progress bar → Can cancel → Result

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// BEFORE: Sequential blocking I/O
function fetchDashboardDataBlocking(): DashboardData {
    const user = database.fetchUserSync(userId);        // 50ms wait
    const orders = database.fetchOrdersSync(userId);    // 80ms wait
    const recommendations = api.fetchRecsSync(userId);  // 100ms wait
    // Total: 230ms, UI blocked entire time
    
    return { user, orders, recommendations };
}
 
// AFTER: Parallel async I/O
async function fetchDashboardDataAsync(): Promise<DashboardData> {
    // Start all fetches simultaneously
    const [user, orders, recommendations] = await Promise.all([
        database.fetchUser(userId),         // 50ms
        database.fetchOrders(userId),       // 80ms  
        api.fetchRecommendations(userId)    // 100ms
    ]);
    // Total: max(50, 80, 100) = 100ms
    // 56% faster! And we can show partial results even earlier
    
    return { user, orders, recommendations };
}
 
// EVEN BETTER: Progressive rendering
async function fetchDashboardDataProgressive(): Promise<void> {
    // Show skeleton immediately
    this.renderSkeleton();
    
    // Fetch and render as data arrives
    database.fetchUser(userId).then(user => {
        this.renderUserSection(user);  // Shows in ~50ms
    });
    
    database.fetchOrders(userId).then(orders => {
        this.renderOrdersSection(orders);  // Shows in ~80ms
    });
    
    api.fetchRecommendations(userId).then(recs => {
        this.renderRecommendations(recs);  // Shows in ~100ms
    });
    
    // User sees content progressively, feels much faster!
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// Sequential processing: one at a time
async function processOrdersSequential(orders: Order[]): Promise<void> {
    for (const order of orders) {
        await validateOrder(order);      // 10ms
        await checkInventory(order);     // 20ms
        await chargePayment(order);      // 50ms
        await sendConfirmation(order);   // 30ms
    }
    // 100 orders × 110ms = 11 seconds
    // Throughput: 9 orders/second
}
 
// Concurrent processing: many at once
async function processOrdersConcurrent(orders: Order[]): Promise<void> {
    // Process all orders concurrently
    await Promise.all(orders.map(async (order) => {
        await validateOrder(order);
        await checkInventory(order);
        await chargePayment(order);
        await sendConfirmation(order);
    }));
    // 100 orders, I/O overlapped
    // Total time: ~200ms (limited by external API capacity)
    // Throughput: 500 orders/second (55x improvement!)
}
 
// Controlled concurrency: bounded parallelism
async function processOrdersControlled(
    orders: Order[], 
    concurrencyLimit: number = 20
): Promise<void> {
    const semaphore = new Semaphore(concurrencyLimit);
    
    await Promise.all(orders.map(async (order) => {
        await semaphore.acquire();
        try {
            await validateOrder(order);
            await checkInventory(order);
            await chargePayment(order);
            await sendConfirmation(order);
        } finally {
            semaphore.release();
        }
    }));
    // Balanced: high throughput without overwhelming external services
    // Throughput: ~180 orders/second with 20 concurrent
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

enum WorkPriority {
    REALTIME = 0,    // User is actively waiting (< 100ms target)
    INTERACTIVE = 1, // User-triggered, visible (< 500ms target)
    BACKGROUND = 2,  // Async work (< 30s target)
    BATCH = 3        // Bulk processing (no strict deadline)
}
 
class PriorityWorkQueue {
    private queues: Map<WorkPriority, WorkItem[]> = new Map();
    private workers: Worker[] = [];
    
    submit(work: WorkItem, priority: WorkPriority): void {
        this.queues.get(priority)?.push(work);
    }
    
    // Higher priority work is always processed first
    private getNextWork(): WorkItem | null {
        for (const priority of [
            WorkPriority.REALTIME,
            WorkPriority.INTERACTIVE,
            WorkPriority.BACKGROUND,
            WorkPriority.BATCH
        ]) {
            const queue = this.queues.get(priority);
            if (queue && queue.length > 0) {
                return queue.shift()!;
            }
        }
        return null;
    }
}
 
// Usage: User actions get priority over batch jobs
workQueue.submit(userSearchQuery, WorkPriority.REALTIME);
workQueue.submit(analyticsUpdate, WorkPriority.BACKGROUND);
workQueue.submit(dailyReportGeneration, WorkPriority.BATCH);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// Database connection pools separated by use case
const connectionPools = {
    // User requests: small pool, low latency
    interactive: new Pool({
        size: 10,
        maxWait: 100,  // Fail fast if no connection available
        queryTimeout: 5000
    }),
    
    // Analytics queries: larger pool, can wait
    analytics: new Pool({
        size: 5,
        maxWait: 5000,
        queryTimeout: 30000
    }),
    
    // Batch operations: single connection, won't starve others
    batch: new Pool({
        size: 2,
        maxWait: 60000,
        queryTimeout: 300000  // 5 minute timeout for batch
    })
};
 
// Usage: Route work to appropriate pool
async function handleUserRequest(req: Request) {
    // Uses interactive pool - guaranteed fast connection
    return connectionPools.interactive.query(req.sql);
}
 
async function runDailyReport() {
    // Uses batch pool - won't affect user request pool
    return connectionPools.batch.query(reportQuery);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// Process large dataset without blocking responsive work
async function processLargeDataset(records: Record[]): Promise<void> {
    const CHUNK_SIZE = 100;
    const YIELD_INTERVAL_MS = 10;  // Check for higher-priority work
    
    for (let i = 0; i < records.length; i += CHUNK_SIZE) {
        const chunk = records.slice(i, i + CHUNK_SIZE);
        
        // Process this chunk
        await processChunk(chunk);
        
        // Yield to event loop - allows responsive work to run
        await sleep(YIELD_INTERVAL_MS);
        
        // Report progress for visibility
        console.log(`Processed ${i + chunk.length} / ${records.length}`);
    }
}
 
// In browser context, use requestIdleCallback for even better behavior
function processIdleWork(records: Record[]): void {
    let index = 0;
    
    function processNext(deadline: IdleDeadline) {
        // Process records while we have idle time
        while (index < records.length && deadline.timeRemaining() > 1) {
            processRecord(records[index++]);
        }
        
        if (index < records.length) {
            // More work to do, schedule next idle callback
            requestIdleCallback(processNext);
        }
    }
    
    requestIdleCallback(processNext);
}