🎉 Added minimal performance optimizations to documentation and codebase.
This commit is contained in:
104
backend/static/js/performance-enhancements.js
Normal file
104
backend/static/js/performance-enhancements.js
Normal file
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* Minimal-invasive Performance-Optimierungen für MYP Platform
|
||||
* Behält alle Funktionen bei, optimiert nur die Performance
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Detektiere schwache Geräte
|
||||
const isLowPerformanceDevice = () => {
|
||||
return (
|
||||
navigator.hardwareConcurrency <= 2 ||
|
||||
navigator.deviceMemory <= 2 ||
|
||||
/Android|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent)
|
||||
);
|
||||
};
|
||||
|
||||
// Reduziere Animationen nur bei schwachen Geräten
|
||||
if (isLowPerformanceDevice()) {
|
||||
document.documentElement.style.setProperty('--animation-speed', '0.5');
|
||||
document.documentElement.classList.add('low-performance');
|
||||
}
|
||||
|
||||
// Optimierte Intersection Observer für bessere Performance
|
||||
const observerOptions = {
|
||||
rootMargin: '50px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
// Lazy Loading für schwere Elemente
|
||||
const lazyElements = document.querySelectorAll('[data-lazy]');
|
||||
if (lazyElements.length && 'IntersectionObserver' in window) {
|
||||
const lazyObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const element = entry.target;
|
||||
element.classList.add('loaded');
|
||||
lazyObserver.unobserve(element);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
lazyElements.forEach(el => lazyObserver.observe(el));
|
||||
}
|
||||
|
||||
// Debounced Resize Handler für bessere Performance
|
||||
let resizeTimeout;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
// Nur bei größeren Änderungen reagieren
|
||||
document.dispatchEvent(new CustomEvent('optimizedResize'));
|
||||
}, 150);
|
||||
});
|
||||
|
||||
// Optimierte Animation-Callbacks
|
||||
let animationFrame;
|
||||
const scheduleAnimation = (callback) => {
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
}
|
||||
animationFrame = requestAnimationFrame(callback);
|
||||
};
|
||||
|
||||
// Performance-Monitor (nur in Development)
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
let performanceWarnings = 0;
|
||||
const maxWarnings = 5;
|
||||
|
||||
const checkPerformance = () => {
|
||||
if (performance.now() > 16 && performanceWarnings < maxWarnings) {
|
||||
console.warn('🐌 Performance: Frame took longer than 16ms');
|
||||
performanceWarnings++;
|
||||
}
|
||||
};
|
||||
|
||||
// Performance-Monitoring nur in Development
|
||||
setInterval(checkPerformance, 1000);
|
||||
}
|
||||
|
||||
// Graceful Degradation für ältere Browser
|
||||
if (!window.CSS || !CSS.supports || !CSS.supports('backdrop-filter', 'blur(1px)')) {
|
||||
document.documentElement.classList.add('no-backdrop-filter');
|
||||
}
|
||||
|
||||
// Memory-Optimierung für Event Listeners
|
||||
const eventOptions = { passive: true };
|
||||
|
||||
// Optimierte Scroll-Handler
|
||||
let scrollTimeout;
|
||||
window.addEventListener('scroll', () => {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() => {
|
||||
document.dispatchEvent(new CustomEvent('optimizedScroll'));
|
||||
}, 10);
|
||||
}, eventOptions);
|
||||
|
||||
console.log('✨ Performance-Optimierungen geladen:', {
|
||||
lowPerformance: isLowPerformanceDevice(),
|
||||
backropFilter: CSS.supports('backdrop-filter', 'blur(1px)'),
|
||||
memory: navigator.deviceMemory || 'unknown',
|
||||
cores: navigator.hardwareConcurrency || 'unknown'
|
||||
});
|
||||
})();
|
Reference in New Issue
Block a user