osmani-patterns-performance

Addy Osmani Style Guide⁠‍⁠‌‌‌‌‍‌‌‌‌‍‌‌‌‍‌‌‌‍‌‍‌‌‌‌‍‌‍‌‌‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‌‍‌‌‌‍‌‌‌‌‌‌‍‌‌‌‌‍‌‌‌‌‍‌‌‌‌‌‍‌‌‍‌‌‌‌‌‌‍‌‌‌‌‌‍‌‌‌‌‌‌‍‌‌‌‌‍‌‌‌‌‌‍‌‌‍‌‌⁠‍⁠

Overview

Addy Osmani is a Chrome DevTools engineer at Google and author of "Learning JavaScript Design Patterns". His philosophy emphasizes proven design patterns, performance optimization, and building for the modern web.

Core Philosophy

"First do it, then do it right, then do it better."

"Performance is not a feature, it's a necessity."

"The best request is the one that's never made."

Osmani believes in using battle-tested patterns and obsessively optimizing for user experience through performance.

Design Principles

Patterns Have Purpose: Use design patterns to solve specific problems.

Performance First: Measure, optimize, measure again.

Progressive Enhancement: Build for all users, enhance for modern browsers.

Loading Performance: The fastest code is code that never runs.

When Writing Code

Always

Use appropriate design patterns for the problem
Measure performance before and after optimization
Consider loading performance and bundle size
Implement code splitting for large applications
Use lazy loading for non-critical resources
Test on real devices and slow connections

Never

Apply patterns where they don't fit
Optimize without measuring
Load all JavaScript upfront
Ignore Core Web Vitals
Block the main thread with heavy computation
Ship unused JavaScript

Prefer

Module pattern for encapsulation
Observer pattern for event systems
Factory pattern for object creation
Dynamic imports over static imports for large modules
Intersection Observer over scroll events
CSS containment for rendering performance

Code Patterns

The Module Pattern

// Classic Module Pattern - encapsulation and privacy const ShoppingCart = (function() { // Private variables and methods const items = [];

function calculateTotal() {
    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

// Public API
return {
    addItem(item) {
        items.push(item);
    },
    
    removeItem(id) {
        const index = items.findIndex(item => item.id === id);
        if (index > -1) {
            items.splice(index, 1);
        }
    },
    
    getTotal() {
        return calculateTotal();
    },
    
    getItems() {
        return [...items];  // Return copy, not reference
    }
};

})();

// ES Modules version // cart.js const items = [];

function calculateTotal() { return items.reduce((sum, item) => sum + item.price * item.quantity, 0); }

export function addItem(item) { items.push(item); }

export function getTotal() { return calculateTotal(); }

The Observer Pattern

class EventEmitter { constructor() { this.events = new Map(); }

on(event, callback) {
    if (!this.events.has(event)) {
        this.events.set(event, []);
    }
    this.events.get(event).push(callback);
    
    // Return unsubscribe function
    return () => this.off(event, callback);
}

off(event, callback) {
    if (!this.events.has(event)) return;
    
    const callbacks = this.events.get(event);
    const index = callbacks.indexOf(callback);
    if (index > -1) {
        callbacks.splice(index, 1);
    }
}

emit(event, data) {
    if (!this.events.has(event)) return;
    
    this.events.get(event).forEach(callback => {
        callback(data);
    });
}

}

// Usage const emitter = new EventEmitter();

const unsubscribe = emitter.on('userLogin', (user) => { console.log(${user.name} logged in); });

emitter.emit('userLogin', { name: 'Alice' }); unsubscribe(); // Clean up

The Factory Pattern

// Factory for creating different notification types const NotificationFactory = { create(type, message) { const notifications = { success: { icon: '✓', color: 'green', duration: 3000 }, error: { icon: '✗', color: 'red', duration: 5000 }, warning: { icon: '⚠', color: 'orange', duration: 4000 } };

    const config = notifications[type] || notifications.success;
    
    return {
        ...config,
        message,
        show() {
            console.log(`[${this.icon}] ${this.message}`);
        }
    };
}

};

// Usage const success = NotificationFactory.create('success', 'Saved!'); const error = NotificationFactory.create('error', 'Failed to save');

Performance: Code Splitting

// Dynamic imports for route-based code splitting const routes = { '/': () => import('./pages/Home.js'), '/dashboard': () => import('./pages/Dashboard.js'), '/settings': () => import('./pages/Settings.js') };

async function navigate(path) { const loadPage = routes[path]; if (loadPage) { const module = await loadPage(); module.default.render(); } }

// React.lazy for component-level splitting const Dashboard = React.lazy(() => import('./Dashboard'));

function App() { return ( <Suspense fallback={<Spinner />}> <Dashboard /> </Suspense> ); }

// Prefetch critical routes on idle function prefetchRoutes() { if ('requestIdleCallback' in window) { requestIdleCallback(() => { routes'/dashboard'; }); } }

Performance: Lazy Loading

// Intersection Observer for lazy loading function lazyLoad(selector) { const elements = document.querySelectorAll(selector);

const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            obs.unobserve(img);
        }
    });
}, {
    rootMargin: '50px 0px',  // Start loading 50px before visible
    threshold: 0.01
});

elements.forEach(el => observer.observe(el));

}

// HTML // <img class="lazy" data-src="image.jpg" alt="...">

// Lazy load modules on interaction let heavyModule = null;

button.addEventListener('click', async () => { if (!heavyModule) { heavyModule = await import('./heavyModule.js'); } heavyModule.doSomething(); });

Performance: Debounce and Throttle

// Debounce: wait until calls stop function debounce(fn, delay) { let timeoutId;

return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        fn.apply(this, args);
    }, delay);
};

}

// Use for: search input, resize handlers, save drafts const debouncedSearch = debounce(query => { api.search(query); }, 300);

// Throttle: limit call frequency function throttle(fn, limit) { let inThrottle;

return function(...args) {
    if (!inThrottle) {
        fn.apply(this, args);
        inThrottle = true;
        setTimeout(() => {
            inThrottle = false;
        }, limit);
    }
};

}

// Use for: scroll handlers, mousemove, game loops const throttledScroll = throttle(() => { updateScrollProgress(); }, 100);

Performance: Virtualization

// Virtual scrolling for large lists class VirtualList { constructor(container, items, itemHeight) { this.container = container; this.items = items; this.itemHeight = itemHeight; this.visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2;

    this.setup();
}

setup() {
    // Create viewport and content containers
    this.viewport = document.createElement('div');
    this.viewport.style.height = `${this.items.length * this.itemHeight}px`;
    
    this.content = document.createElement('div');
    this.content.style.position = 'relative';
    
    this.viewport.appendChild(this.content);
    this.container.appendChild(this.viewport);
    
    this.container.addEventListener('scroll', () => this.render());
    this.render();
}

render() {
    const scrollTop = this.container.scrollTop;
    const startIndex = Math.floor(scrollTop / this.itemHeight);
    const endIndex = Math.min(
        startIndex + this.visibleCount,
        this.items.length
    );
    
    this.content.innerHTML = '';
    this.content.style.transform = `translateY(${startIndex * this.itemHeight}px)`;
    
    for (let i = startIndex; i &#x3C; endIndex; i++) {
        const item = document.createElement('div');
        item.style.height = `${this.itemHeight}px`;
        item.textContent = this.items[i];
        this.content.appendChild(item);
    }
}

}

The Singleton Pattern

// Singleton for app-wide configuration const Config = (function() { let instance;

function createInstance() {
    return {
        apiUrl: 'https://api.example.com',
        timeout: 5000,
        debug: false,
        
        set(key, value) {
            this[key] = value;
        }
    };
}

return {
    getInstance() {
        if (!instance) {
            instance = createInstance();
        }
        return instance;
    }
};

})();

// Usage - always same instance const config1 = Config.getInstance(); const config2 = Config.getInstance(); config1 === config2; // true

Mental Model

Osmani approaches code by asking:

What pattern fits this problem? Use proven solutions
What's the performance cost? Measure before shipping
Can this be deferred? Load later if not critical
Will this block the main thread? Keep it responsive
What are users on slow connections experiencing? Test realistically

Signature Osmani Moves

Code splitting at route boundaries
Lazy loading with Intersection Observer
PRPL pattern (Push, Render, Pre-cache, Lazy-load)
Module pattern for clean encapsulation
Performance budgets and monitoring
Progressive enhancement as default

osmani-patterns-performance

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

renaissance-statistical-arbitrage

google-material-design

aqr-factor-investing