Skip to main content

​
Overview

The S-Parking dashboard implements multiple layers of optimization to maintain smooth performance even with hundreds of parking spots updating in real-time. Key strategies include:
  • In-memory and localStorage caching
  • Smart polling with Page Visibility API
  • Debounced event handlers
  • Efficient DOM updates

​
Multi-Layer Caching Strategy

​
Layer 1: In-Memory Cache

The api/parking.js module maintains a memory cache for rapid access:
api/parking.js
const STORAGE_KEY_SPOTS = 'sparking_spots_local';
const STORAGE_KEY_SPOTS_SYNC = 'sparking_spots_synced_at';

// In-memory cache
let cachedStatus = null;
let cacheStatusTimestamp = null;

export async function fetchParkingStatus() {
    const now = Date.now();
    const cacheDuration = CONFIG.PERFORMANCE?.CACHE_PARKING_STATUS || 15000;
    
    // Return cache if valid (< 15 seconds old)
    if (cachedStatus && cacheStatusTimestamp && 
        (now - cacheStatusTimestamp < cacheDuration)) {
        logger.debug('📦 Usando estado de puestos desde cache en memoria');
        return cachedStatus;
    }
    
    try {
        logger.debug('📍 Obteniendo estado de puestos de API...');
        const response = await fetch(CONFIG.GET_STATUS_API_URL);
        if (!response.ok) throw new Error('Error de red al obtener status');
        const data = await response.json();
        
        // Update in-memory cache
        cachedStatus = data;
        cacheStatusTimestamp = now;
        
        // Persist to localStorage
        localStorage.setItem(STORAGE_KEY_SPOTS, JSON.stringify(data));
        localStorage.setItem(STORAGE_KEY_SPOTS_SYNC, new Date().toISOString());
        
        return data;
    } catch (error) {
        console.error("⚠️ Error obteniendo puestos:", error);
        
        // Fallback to localStorage
        try {
            const stored = localStorage.getItem(STORAGE_KEY_SPOTS);
            if (stored) {
                logger.debug('💾 Usando puestos almacenados localmente');
                return JSON.parse(stored);
            }
        } catch (parseError) {
            console.error('❌ Error leyendo localStorage:', parseError);
        }
        
        throw error;
    }
}

Cache Invalidation

After mutations (create/update/delete), the cache is invalidated:
export function invalidateParkingCache() {
    cachedStatus = null;
    cacheStatusTimestamp = null;
    logger.debug('🗑️ Cache de estado de puestos invalidado');
}
This ensures users always see fresh data after admin changes.

​
Layer 2: localStorage Persistence

LocalStorage provides:
  • Offline resilience: App works during network outages
  • Instant startup: No waiting for initial API call
  • Reduced server load: Fallback reduces redundant requests
api/parking.js
export async function createSpot(data) {
    try {
        invalidateParkingCache();
        const response = await fetch(CONFIG.CREATE_SPOT_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        const result = await response.json();
        
        // Refresh local cache
        const spots = await fetchParkingStatus();
        localStorage.setItem(STORAGE_KEY_SPOTS, JSON.stringify(spots));
        
        return result;
    } catch (error) {
        console.error("❌ Error creando puesto:", error);
        
        // Optimistic update to localStorage
        try {
            let spots = [];
            const stored = localStorage.getItem(STORAGE_KEY_SPOTS);
            if (stored) spots = JSON.parse(stored);
            
            const newSpot = {
                ...data,
                id: data.id.toUpperCase(),
                status: data.status || 1,
                created_at: new Date().toISOString(),
                _local: true  // Flag for debugging
            };
            spots.push(newSpot);
            localStorage.setItem(STORAGE_KEY_SPOTS, JSON.stringify(spots));
            
            logger.debug('✅ Puesto creado localmente:', newSpot);
            return { success: true, spot: newSpot, _local: true };
        } catch (e) {
            console.error('Error en fallback local:', e);
            return null;
        }
    }
}
The _local: true flag helps identify optimistically-created spots in the UI, which can be styled differently (e.g., pulsing border) until synced.

​
Page Visibility API

The app pauses polling when the tab is hidden, saving bandwidth and battery:
main.js
const pollingInterval = CONFIG.PERFORMANCE?.POLLING_INTERVAL || 20000;
const historyInterval = CONFIG.PERFORMANCE?.HISTORY_REFRESH || (10 * 60 * 1000);
const timerInterval = CONFIG.PERFORMANCE?.TIMER_UPDATE || 5000;

// Store interval IDs for control
const intervals = {
    data: setInterval(fetchData, pollingInterval),
    timer: setInterval(updateTimer, timerInterval),
    history: setInterval(updateHistory, historyInterval)
};

// Page Visibility API: pause polling when tab is hidden
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        // Tab hidden: clear all intervals
        logger.debug('⏸️ Tab oculto - pausando polling');
        clearInterval(intervals.data);
        clearInterval(intervals.timer);
        clearInterval(intervals.history);
    } else {
        // Tab visible: resume polling
        logger.debug('▶️ Tab visible - reanudando polling');
        fetchData(); // Immediate fetch on resume
        intervals.data = setInterval(fetchData, pollingInterval);
        intervals.timer = setInterval(updateTimer, timerInterval);
        intervals.history = setInterval(updateHistory, historyInterval);
    }
});
Background tabs waste resources:
  • Users often have 10+ tabs open
  • Polling every 20s = 180 requests/hour
  • Multiply by 10 tabs = 1800 requests/hour from one user!
Visibility API reduces load:
  • Only active tab polls
  • Server load reduced by ~90%
  • Battery life improved on mobile

​
Configurable Polling Intervals

Performance tuning is centralized in config/config.js:
config/config.js
export const CONFIG = {
    // API Endpoints
    GET_STATUS_API_URL: 'https://api.sparking.cl/spots/status',
    
    // Performance Settings
    PERFORMANCE: {
        POLLING_INTERVAL: 20000,           // 20s: main data refresh
        CACHE_PARKING_STATUS: 15000,       // 15s: in-memory cache TTL
        HISTORY_REFRESH: 10 * 60 * 1000,   // 10min: historical data
        TIMER_UPDATE: 5000,                // 5s: relative time updates
    },
    
    // ... other config
};
Tuning Guidelines:
  • High traffic periods: Reduce POLLING_INTERVAL to 10s for fresher data
  • Low traffic periods: Increase to 30s to reduce load
  • Mobile devices: Increase all intervals by 50% to save battery
Search input triggers re-renders, so we debounce to reduce DOM thrashing:
utils/helpers.js
export function debounce(func, wait = 300) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
Usage:
main.js
const searchInput = document.getElementById('search-input');
const debouncedSearch = debounce((query) => {
    state.searchQuery = query;
    UI_Sidebar.renderSidebar(
        state.spots, 
        state.zones, 
        state.historyData.zoneData,
        state.filter, 
        query, 
        state.myReservation?.spotId, 
        handleSpotClick
    );
}, 300);

searchInput.addEventListener('input', (e) => {
    debouncedSearch(e.target.value);
});

Impact

Without debouncing:
  • Typing “parking” = 7 renders
  • 50ms per render = 350ms total
  • Janky, stuttering UX
With 300ms debounce:
  • Typing “parking” = 1 render (after pause)
  • 50ms total
  • Smooth, responsive UX

​
Efficient Marker Updates

The marker system only updates changed markers, not the entire set:
map/markers.js
function renderSpotMarkers(spots, onMarkerClick) {
    const activeIds = new Set(spots.map(s => s.id));

    // Step 1: Remove deleted markers
    Object.keys(markersCache).forEach(id => {
        if (!activeIds.has(id)) {
            markersCache[id].map = null;  // Dispose
            delete markersCache[id];
        }
    });

    // Step 2: Update or create
    spots.forEach(spot => {
        const pinContent = document.createElement('div');
        pinContent.className = getPinClass(spot.status);

        if (markersCache[spot.id]) {
            // Update only if changed
            const marker = markersCache[spot.id];
            if (marker.content.className !== pinContent.className) {
                marker.content.className = pinContent.className;
            }
            marker.position = { lat: spot.lat, lng: spot.lng };
        } else {
            // Create new
            const marker = new mapState.AdvancedMarkerElement({
                map: mapState.map,
                position: { lat: spot.lat, lng: spot.lng },
                content: pinContent,
                title: spot.id
            });
            marker.addListener('click', () => {
                showMiniInfoWindow(marker, spot);
                if (onMarkerClick) onMarkerClick(spot);
            });
            markersCache[spot.id] = marker;
        }
    });
}
Performance:
  • 100 spots total
  • 5 status changes
  • Before optimization: 100 markers destroyed + 100 recreated = 200 ops
  • After optimization: 5 markers updated = 5 ops
  • 40x faster for typical update cycles
The sidebar preserves collapse state and uses DocumentFragment for batch DOM updates:
ui/sidebar.js
export function renderSidebar(spots, zones, zoneHistoryData, filter, searchQuery, 
                              userResSpotId, onSpotClick) {
    const container = document.getElementById('parking-list');
    if (!container) return;

    // Save collapse state BEFORE clearing
    const previousCollapsedState = {};
    container.querySelectorAll('.zone-accordion').forEach(section => {
        const zoneId = section.dataset.zoneId;
        const isCollapsed = section.querySelector('.zone-body')?.classList.contains('hidden');
        previousCollapsedState[zoneId] = isCollapsed;
    });

    // Prevent flicker: preserve height during render
    const prevHeight = container.offsetHeight;
    if (prevHeight > 0) {
        container.style.minHeight = prevHeight + 'px';
    }
    
    // Build new content in memory
    const fragment = document.createDocumentFragment();
    sortedZoneIds.forEach(zoneId => {
        const wasCollapsed = previousCollapsedState[zoneId] ?? true;
        const section = createZoneAccordion(zoneId, zoneName, counts, 
                                            filteredZoneSpots, historyForZone, 
                                            userResSpotId, onSpotClick, wasCollapsed);
        fragment.appendChild(section);
    });

    // Atomic replacement (single reflow)
    if (fragment.childElementCount > 0) {
        container.replaceChildren(fragment);
    }

    // Restore natural height
    container.style.minHeight = '';
}

Flicker Prevention

Problem: Clearing and rebuilding the sidebar causes a visible flashSolutions:
  1. Preserve height: Container maintains size during rebuild
  2. DocumentFragment: Build DOM tree in memory, insert once
  3. Collapse state: Users don’t lose their expanded zones
Result: Seamless updates that feel instant

​
Chart.js Memory Management

Chart instances must be properly destroyed to prevent memory leaks:
ui/charts.js
export function initChartWithData(ctx, historyData) {
    // Destroy existing chart
    const existingChart = Chart.getChart(ctx);
    if (existingChart) {
        console.log('🗑️ Destruyendo chart existente');
        existingChart.destroy();
    }
    if (hourlyChart) {
        hourlyChart = null;
    }

    try {
        hourlyChart = new Chart(ctx, {
            type: 'line',
            data: { /* ... */ },
            options: { /* ... */ }
        });
    } catch (error) {
        console.error('❌ Error creando chart:', error);
        hourlyChart = null;
    }
}
For the expanded chart modal:
main.js
function closeExpandedChart() {
    const modal = document.getElementById('modal-chart-expanded');
    if (!modal) return;

    modal.classList.add('hidden');
    
    // Destroy chart to free memory
    const canvas = document.getElementById('expanded-chart');
    if (canvas) {
        const existingChart = Chart.getChart(canvas);
        if (existingChart) {
            existingChart.destroy();
        }
    }
}
Chart.js keeps a global registry of chart instances. Always use Chart.getChart(canvas) to check for existing charts before creating new ones.

​
Relative Time Updates

Instead of re-fetching data every 5 seconds to update “2 minutes ago” labels, we calculate on the fly:
utils/formatters.js
export function formatTimeSince(isoTimestamp) {
    if (!isoTimestamp) return '--';
    
    const now = new Date();
    const then = new Date(isoTimestamp);
    const diffMs = now - then;
    const diffMins = Math.floor(diffMs / 60000);
    
    if (diffMins < 1) return 'Ahora';
    if (diffMins < 60) return `Hace ${diffMins} min`;
    
    const diffHours = Math.floor(diffMins / 60);
    if (diffHours < 24) return `Hace ${diffHours}h`;
    
    const diffDays = Math.floor(diffHours / 24);
    return `Hace ${diffDays}d`;
}
This function is called during sidebar renders, which happen naturally during polling cycles. No extra intervals needed!

​
Performance Monitoring

Add this to your console to track render performance: 
// In browser console:
window.performance.mark('render-start');
UI_Sidebar.renderSidebar(/* ... */);
window.performance.mark('render-end');
window.performance.measure('sidebar-render', 'render-start', 'render-end');
window.performance.getEntriesByName('sidebar-render');

​
Benchmarks

  • Initial load: 3.2s
  • Polling cycle: 450ms
  • Search render: 280ms per keystroke
  • Memory usage: 85MB after 10min
config/config.js
// High-traffic campus (1000+ spots)
PERFORMANCE: {
    POLLING_INTERVAL: 15000,        // Frequent updates
    CACHE_PARKING_STATUS: 10000,    // Short cache
    HISTORY_REFRESH: 5 * 60 * 1000, // More frequent history
    TIMER_UPDATE: 10000             // Less frequent timers
}

// Low-traffic office (100 spots)
PERFORMANCE: {
    POLLING_INTERVAL: 30000,        // Less frequent
    CACHE_PARKING_STATUS: 20000,    // Longer cache
    HISTORY_REFRESH: 15 * 60 * 1000,// Infrequent history
    TIMER_UPDATE: 15000             // Slower timers
}

// Mobile-optimized
PERFORMANCE: {
    POLLING_INTERVAL: 25000,        // Battery-friendly
    CACHE_PARKING_STATUS: 20000,    
    HISTORY_REFRESH: 20 * 60 * 1000,// Minimal background data
    TIMER_UPDATE: 20000             
}

Dashboard Architecture

Understand the state management and module structure

Map Integration

Learn about marker caching and rendering optimizations

Build docs developers (and LLMs) love

Get started for freeTalk to us