core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎉 Added minimal performance optimizations to documentation and codebase.

Browse Source
This commit is contained in:
Till Tomczak
2025-06-20 08:46:41 +02:00
parent cbea4cb765
commit e0eab2b6b1
25 changed files with 431 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
backend/static/js/glassmorphism-notifications.js
View File

@ -8,7 +8,7 @@ class GlassmorphismNotificationSystem {
this.notifications = new Map();
this.toastCounter = 0;
this.soundEnabled = localStorage.getItem('myp-notification-sound') !== 'false';
this.animationsEnabled = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
this.animationsEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches && !this.isLowPerformanceDevice();
// Callback-Registry für Actions hinzufügen
this.actionCallbacks = new Map();
@ -29,6 +29,14 @@ class GlassmorphismNotificationSystem {
console.log('🎨 Glassmorphism Notification System initialisiert');
}
isLowPerformanceDevice() {
return (
navigator.hardwareConcurrency <= 2 ||
navigator.deviceMemory <= 2 ||
/Android|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent)
);
}
createToastContainer() {
if (!document.getElementById('glassmorphism-toast-container')) {
const container = document.createElement('div');

104
backend/static/js/performance-enhancements.js Normal file
View 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'
});
})();

1
backend/static/js/performance-enhancements.min.js vendored Normal file
View File

@ -0,0 +1 @@
(function(){'use strict';const e=()=>navigator.hardwareConcurrency<=2||navigator.deviceMemory<=2||/Android|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);e()&&(document.documentElement.style.setProperty('--animation-speed','0.5'),document.documentElement.classList.add('low-performance'));const t={rootMargin:'50px',threshold:0.1},n=document.querySelectorAll('[data-lazy]');if(n.length&&'IntersectionObserver'in window){const o=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(e.target.classList.add('loaded'),o.unobserve(e.target))})},t);n.forEach(e=>o.observe(e))}let r;window.addEventListener('resize',()=>{clearTimeout(r),r=setTimeout(()=>{document.dispatchEvent(new CustomEvent('optimizedResize'))},150)});let i;const s=e=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(e)};if('localhost'===window.location.hostname||'127.0.0.1'===window.location.hostname){let a=0;const c=()=>{performance.now()>16&&a<5&&(console.warn('🐌 Performance: Frame took longer than 16ms'),a++)};setInterval(c,1000)}window.CSS&&CSS.supports&&CSS.supports('backdrop-filter','blur(1px)')||document.documentElement.classList.add('no-backdrop-filter');const l={passive:!0};let d;window.addEventListener('scroll',()=>{clearTimeout(d),d=setTimeout(()=>{document.dispatchEvent(new CustomEvent('optimizedScroll'))},10)},l),console.log('✨ Performance-Optimierungen geladen:',{lowPerformance:e(),backropFilter:CSS.supports('backdrop-filter','blur(1px)'),memory:navigator.deviceMemory||'unknown',cores:navigator.hardwareConcurrency||'unknown'})})();