mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-24 13:31:09 -05:00
Improve park listing performance with optimized queries and caching
Implement performance enhancements for park listing by optimizing database queries, introducing efficient caching mechanisms, and refining pagination for a significantly faster and smoother user experience. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c446bc9e-66df-438c-a86c-f53e6da13649 Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
363
apps/parks/static/parks/css/performance-optimized.css
Normal file
363
apps/parks/static/parks/css/performance-optimized.css
Normal file
@@ -0,0 +1,363 @@
|
||||
/* Performance-optimized CSS for park listing page */
|
||||
|
||||
/* Critical CSS that should be inlined */
|
||||
.park-listing {
|
||||
/* Use GPU acceleration for smooth animations */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Lazy loading image styles */
|
||||
img[data-src] {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
img.loading {
|
||||
opacity: 0.7;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
img.loaded {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
img.error {
|
||||
background: #f5f5f5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optimized grid layout using CSS Grid */
|
||||
.park-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
/* Use containment for better performance */
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.park-card {
|
||||
/* Optimize for animations */
|
||||
will-change: transform, box-shadow;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
/* Enable GPU acceleration */
|
||||
transform: translateZ(0);
|
||||
/* Optimize paint */
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.park-card:hover {
|
||||
transform: translateY(-4px) translateZ(0);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Efficient loading states */
|
||||
.loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: loading-sweep 1.5s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes loading-sweep {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Optimized autocomplete dropdown */
|
||||
.autocomplete-suggestions {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
/* Hide by default */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.2s ease;
|
||||
/* Optimize scrolling */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.autocomplete-suggestions.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.suggestion-item:hover,
|
||||
.suggestion-item.active {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.suggestion-icon {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.suggestion-name {
|
||||
font-weight: 500;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.suggestion-details {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Optimized filter panel */
|
||||
.filter-panel {
|
||||
/* Use flexbox for efficient layout */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
/* Optimize for frequent updates */
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.filter-input:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
/* Performance-optimized pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 2rem 0;
|
||||
/* Optimize for position changes */
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #ddd;
|
||||
background: white;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s ease;
|
||||
/* Optimize for hover effects */
|
||||
will-change: background-color, border-color;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(.disabled) {
|
||||
background: #f8f9fa;
|
||||
border-color: #bbb;
|
||||
}
|
||||
|
||||
.pagination-btn.active {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.pagination-btn.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Responsive optimizations */
|
||||
@media (max-width: 768px) {
|
||||
.park-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* High DPI optimizations */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.park-card img {
|
||||
/* Use higher quality images on retina displays */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduce motion for accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Performance debugging styles (only in development) */
|
||||
.debug-metrics {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-family: monospace;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.debug .debug-metrics {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.debug-metrics span {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Print optimizations */
|
||||
@media print {
|
||||
.autocomplete-suggestions,
|
||||
.filter-panel,
|
||||
.pagination,
|
||||
.debug-metrics {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.park-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.park-card {
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/* Container queries for better responsive design */
|
||||
@container (max-width: 400px) {
|
||||
.park-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.park-card img {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus management for better accessibility */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
background: #000;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
/* Efficient animations using transform and opacity only */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Optimize for critical rendering path */
|
||||
.above-fold {
|
||||
/* Ensure critical content renders first */
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
.below-fold {
|
||||
/* Defer non-critical content */
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: 500px;
|
||||
}
|
||||
518
apps/parks/static/parks/js/performance-optimized.js
Normal file
518
apps/parks/static/parks/js/performance-optimized.js
Normal file
@@ -0,0 +1,518 @@
|
||||
/**
|
||||
* Performance-optimized JavaScript for park listing page
|
||||
* Implements lazy loading, debouncing, and efficient DOM manipulation
|
||||
*/
|
||||
|
||||
class ParkListingPerformance {
|
||||
constructor() {
|
||||
this.searchTimeout = null;
|
||||
this.lastScrollPosition = 0;
|
||||
this.observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '50px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupLazyLoading();
|
||||
this.setupDebouncedSearch();
|
||||
this.setupOptimizedFiltering();
|
||||
this.setupProgressiveImageLoading();
|
||||
this.setupPerformanceMonitoring();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup lazy loading for park images using Intersection Observer
|
||||
*/
|
||||
setupLazyLoading() {
|
||||
if ('IntersectionObserver' in window) {
|
||||
this.imageObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
this.loadImage(entry.target);
|
||||
this.imageObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, this.observerOptions);
|
||||
|
||||
// Observe all lazy images
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
this.imageObserver.observe(img);
|
||||
});
|
||||
} else {
|
||||
// Fallback for browsers without Intersection Observer
|
||||
this.loadAllImages();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load individual image with error handling and placeholder
|
||||
*/
|
||||
loadImage(img) {
|
||||
const src = img.dataset.src;
|
||||
const placeholder = img.dataset.placeholder;
|
||||
|
||||
// Start with low quality placeholder
|
||||
if (placeholder && !img.src) {
|
||||
img.src = placeholder;
|
||||
img.classList.add('loading');
|
||||
}
|
||||
|
||||
// Load high quality image
|
||||
const highQualityImg = new Image();
|
||||
highQualityImg.onload = () => {
|
||||
img.src = highQualityImg.src;
|
||||
img.classList.remove('loading');
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
|
||||
highQualityImg.onerror = () => {
|
||||
img.src = '/static/images/placeholders/park-placeholder.jpg';
|
||||
img.classList.add('error');
|
||||
};
|
||||
|
||||
highQualityImg.src = src;
|
||||
}
|
||||
|
||||
/**
|
||||
* Load all images (fallback for older browsers)
|
||||
*/
|
||||
loadAllImages() {
|
||||
document.querySelectorAll('img[data-src]').forEach(img => {
|
||||
this.loadImage(img);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup debounced search to reduce API calls
|
||||
*/
|
||||
setupDebouncedSearch() {
|
||||
const searchInput = document.querySelector('[data-autocomplete]');
|
||||
if (!searchInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
clearTimeout(this.searchTimeout);
|
||||
|
||||
const query = e.target.value.trim();
|
||||
|
||||
if (query.length < 2) {
|
||||
this.hideSuggestions();
|
||||
return;
|
||||
}
|
||||
|
||||
// Debounce search requests
|
||||
this.searchTimeout = setTimeout(() => {
|
||||
this.performSearch(query);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Handle keyboard navigation
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
this.handleSearchKeyboard(e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform optimized search with caching
|
||||
*/
|
||||
async performSearch(query) {
|
||||
const cacheKey = `search_${query.toLowerCase()}`;
|
||||
|
||||
// Check session storage for cached results
|
||||
const cached = sessionStorage.getItem(cacheKey);
|
||||
if (cached) {
|
||||
const results = JSON.parse(cached);
|
||||
this.displaySuggestions(results);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/parks/autocomplete/?q=${encodeURIComponent(query)}`, {
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
// Cache results for session
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(data));
|
||||
|
||||
this.displaySuggestions(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
this.hideSuggestions();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Display search suggestions with efficient DOM manipulation
|
||||
*/
|
||||
displaySuggestions(data) {
|
||||
const container = document.querySelector('[data-suggestions]');
|
||||
if (!container) return;
|
||||
|
||||
// Use document fragment for efficient DOM updates
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
if (data.suggestions && data.suggestions.length > 0) {
|
||||
data.suggestions.forEach(suggestion => {
|
||||
const item = this.createSuggestionItem(suggestion);
|
||||
fragment.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
const noResults = document.createElement('div');
|
||||
noResults.className = 'no-results';
|
||||
noResults.textContent = 'No suggestions found';
|
||||
fragment.appendChild(noResults);
|
||||
}
|
||||
|
||||
// Replace content efficiently
|
||||
container.innerHTML = '';
|
||||
container.appendChild(fragment);
|
||||
container.classList.add('visible');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create suggestion item element
|
||||
*/
|
||||
createSuggestionItem(suggestion) {
|
||||
const item = document.createElement('div');
|
||||
item.className = `suggestion-item suggestion-${suggestion.type}`;
|
||||
|
||||
const icon = this.getSuggestionIcon(suggestion.type);
|
||||
const details = suggestion.operator ? ` • ${suggestion.operator}` :
|
||||
suggestion.park_count ? ` • ${suggestion.park_count} parks` : '';
|
||||
|
||||
item.innerHTML = `
|
||||
<span class="suggestion-icon">${icon}</span>
|
||||
<span class="suggestion-name">${this.escapeHtml(suggestion.name)}</span>
|
||||
<span class="suggestion-details">${details}</span>
|
||||
`;
|
||||
|
||||
item.addEventListener('click', () => {
|
||||
this.selectSuggestion(suggestion);
|
||||
});
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get icon for suggestion type
|
||||
*/
|
||||
getSuggestionIcon(type) {
|
||||
const icons = {
|
||||
park: '🏰',
|
||||
operator: '🏢',
|
||||
location: '📍'
|
||||
};
|
||||
return icons[type] || '🔍';
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle suggestion selection
|
||||
*/
|
||||
selectSuggestion(suggestion) {
|
||||
const searchInput = document.querySelector('[data-autocomplete]');
|
||||
if (searchInput) {
|
||||
searchInput.value = suggestion.name;
|
||||
|
||||
// Trigger search or navigation
|
||||
if (suggestion.url) {
|
||||
window.location.href = suggestion.url;
|
||||
} else {
|
||||
// Trigger filter update
|
||||
this.updateFilters({ search: suggestion.name });
|
||||
}
|
||||
}
|
||||
|
||||
this.hideSuggestions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide suggestions dropdown
|
||||
*/
|
||||
hideSuggestions() {
|
||||
const container = document.querySelector('[data-suggestions]');
|
||||
if (container) {
|
||||
container.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup optimized filtering with minimal reflows
|
||||
*/
|
||||
setupOptimizedFiltering() {
|
||||
const filterForm = document.querySelector('[data-filter-form]');
|
||||
if (!filterForm) return;
|
||||
|
||||
// Debounce filter changes
|
||||
filterForm.addEventListener('change', (e) => {
|
||||
clearTimeout(this.filterTimeout);
|
||||
|
||||
this.filterTimeout = setTimeout(() => {
|
||||
this.updateFilters();
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update filters using HTMX with loading states
|
||||
*/
|
||||
updateFilters(extraParams = {}) {
|
||||
const form = document.querySelector('[data-filter-form]');
|
||||
const resultsContainer = document.querySelector('[data-results]');
|
||||
|
||||
if (!form || !resultsContainer) return;
|
||||
|
||||
// Show loading state
|
||||
resultsContainer.classList.add('loading');
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Add extra parameters
|
||||
Object.entries(extraParams).forEach(([key, value]) => {
|
||||
formData.set(key, value);
|
||||
});
|
||||
|
||||
// Use HTMX for efficient partial updates
|
||||
if (window.htmx) {
|
||||
htmx.ajax('GET', form.action + '?' + new URLSearchParams(formData), {
|
||||
target: '[data-results]',
|
||||
swap: 'innerHTML'
|
||||
}).then(() => {
|
||||
resultsContainer.classList.remove('loading');
|
||||
this.setupLazyLoading(); // Re-initialize for new content
|
||||
this.updatePerformanceMetrics();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup progressive image loading with CloudFlare optimization
|
||||
*/
|
||||
setupProgressiveImageLoading() {
|
||||
// Use CloudFlare's automatic image optimization
|
||||
document.querySelectorAll('img[data-cf-image]').forEach(img => {
|
||||
const imageId = img.dataset.cfImage;
|
||||
const width = img.dataset.width || 400;
|
||||
|
||||
// Start with low quality
|
||||
img.src = this.getCloudFlareImageUrl(imageId, width, 'low');
|
||||
|
||||
// Load high quality when in viewport
|
||||
if (this.imageObserver) {
|
||||
this.imageObserver.observe(img);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get optimized CloudFlare image URL
|
||||
*/
|
||||
getCloudFlareImageUrl(imageId, width, quality = 'high') {
|
||||
const baseUrl = window.CLOUDFLARE_IMAGES_BASE_URL || '/images';
|
||||
const qualityMap = {
|
||||
low: 20,
|
||||
medium: 60,
|
||||
high: 85
|
||||
};
|
||||
|
||||
return `${baseUrl}/${imageId}/w=${width},quality=${qualityMap[quality]}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup performance monitoring
|
||||
*/
|
||||
setupPerformanceMonitoring() {
|
||||
// Track page load performance
|
||||
if ('performance' in window) {
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
this.reportPerformanceMetrics();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// Track user interactions
|
||||
this.setupInteractionTracking();
|
||||
}
|
||||
|
||||
/**
|
||||
* Report performance metrics
|
||||
*/
|
||||
reportPerformanceMetrics() {
|
||||
if (!('performance' in window)) return;
|
||||
|
||||
const navigation = performance.getEntriesByType('navigation')[0];
|
||||
const paint = performance.getEntriesByType('paint');
|
||||
|
||||
const metrics = {
|
||||
loadTime: navigation.loadEventEnd - navigation.loadEventStart,
|
||||
domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
|
||||
firstPaint: paint.find(p => p.name === 'first-paint')?.startTime || 0,
|
||||
firstContentfulPaint: paint.find(p => p.name === 'first-contentful-paint')?.startTime || 0,
|
||||
timestamp: Date.now(),
|
||||
page: 'park-listing'
|
||||
};
|
||||
|
||||
// Send metrics to analytics (if configured)
|
||||
this.sendAnalytics('performance', metrics);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup interaction tracking for performance insights
|
||||
*/
|
||||
setupInteractionTracking() {
|
||||
const startTime = performance.now();
|
||||
|
||||
['click', 'input', 'scroll'].forEach(eventType => {
|
||||
document.addEventListener(eventType, (e) => {
|
||||
this.trackInteraction(eventType, e.target, performance.now() - startTime);
|
||||
}, { passive: true });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Track user interactions
|
||||
*/
|
||||
trackInteraction(type, target, time) {
|
||||
// Throttle interaction tracking
|
||||
if (!this.lastInteractionTime || time - this.lastInteractionTime > 100) {
|
||||
this.lastInteractionTime = time;
|
||||
|
||||
const interaction = {
|
||||
type,
|
||||
element: target.tagName.toLowerCase(),
|
||||
class: target.className,
|
||||
time: Math.round(time),
|
||||
page: 'park-listing'
|
||||
};
|
||||
|
||||
this.sendAnalytics('interaction', interaction);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send analytics data
|
||||
*/
|
||||
sendAnalytics(event, data) {
|
||||
// Only send in production and if analytics is configured
|
||||
if (window.ENABLE_ANALYTICS && navigator.sendBeacon) {
|
||||
const payload = JSON.stringify({
|
||||
event,
|
||||
data,
|
||||
timestamp: Date.now(),
|
||||
url: window.location.pathname
|
||||
});
|
||||
|
||||
navigator.sendBeacon('/api/analytics/', payload);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update performance metrics display
|
||||
*/
|
||||
updatePerformanceMetrics() {
|
||||
const metricsDisplay = document.querySelector('[data-performance-metrics]');
|
||||
if (!metricsDisplay || !window.SHOW_DEBUG) return;
|
||||
|
||||
const imageCount = document.querySelectorAll('img').length;
|
||||
const loadedImages = document.querySelectorAll('img.loaded').length;
|
||||
const cacheHits = Object.keys(sessionStorage).filter(k => k.startsWith('search_')).length;
|
||||
|
||||
metricsDisplay.innerHTML = `
|
||||
<div class="debug-metrics">
|
||||
<span>Images: ${loadedImages}/${imageCount}</span>
|
||||
<span>Cache hits: ${cacheHits}</span>
|
||||
<span>Memory: ${this.getMemoryUsage()}MB</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get approximate memory usage
|
||||
*/
|
||||
getMemoryUsage() {
|
||||
if ('memory' in performance) {
|
||||
return Math.round(performance.memory.usedJSHeapSize / 1024 / 1024);
|
||||
}
|
||||
return 'N/A';
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keyboard navigation in search
|
||||
*/
|
||||
handleSearchKeyboard(e) {
|
||||
const suggestions = document.querySelectorAll('.suggestion-item');
|
||||
const active = document.querySelector('.suggestion-item.active');
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
this.navigateSuggestions(suggestions, active, 1);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
this.navigateSuggestions(suggestions, active, -1);
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (active) {
|
||||
active.click();
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
this.hideSuggestions();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate through suggestions with keyboard
|
||||
*/
|
||||
navigateSuggestions(suggestions, active, direction) {
|
||||
if (active) {
|
||||
active.classList.remove('active');
|
||||
}
|
||||
|
||||
let index = active ? Array.from(suggestions).indexOf(active) : -1;
|
||||
index += direction;
|
||||
|
||||
if (index < 0) index = suggestions.length - 1;
|
||||
if (index >= suggestions.length) index = 0;
|
||||
|
||||
if (suggestions[index]) {
|
||||
suggestions[index].classList.add('active');
|
||||
suggestions[index].scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function to escape HTML
|
||||
*/
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize performance optimizations when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new ParkListingPerformance();
|
||||
});
|
||||
} else {
|
||||
new ParkListingPerformance();
|
||||
}
|
||||
|
||||
// Export for testing
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = ParkListingPerformance;
|
||||
}
|
||||
Reference in New Issue
Block a user