104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
/**
|
|
* 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'
|
|
});
|
|
})();
|