1. Asenkron İşlemleri Optimize Etmek: Kodunuzun Tıkanmasını Önleyin
Düşünün, kullanıcı sayfanın altına kaydırırken, bir API'den veri almak için yapılan istek ile sayfa arasında bir yarış başlıyor. Eğer beklemeyi iyi yönetmezseniz, bu işlemler birbirini engelleyebilir ve kullanıcıya kötü bir deneyim sunabilirsiniz.
İşte ipucu: Promise.all veya async/await kullanarak işlemleri paralel hale getirebilirsiniz. Bu, işlemler arasında bir engel olmadan daha verimli bir çalışma sağlar. Asenkron işlemleri doğru sırayla yönetmek, JavaScript’inizi daha hızlı hale getirecektir.
kopyalaasync function fetchData() { const response1 = await fetch('https://api.example.com/data1'); const response2 = await fetch('https://api.example.com/data2'); return [response1.json(), response2.json()]; }
2. Event Delegation Teknikleri: DOM Manipülasyonlarını Daha Verimli Hale Getirin
Event delegation, yalnızca üst bir DOM elemanında (örneğin bir container) olayları dinleyerek alt elemanların olaylarını kontrol etmenizi sağlar. Bu, her yeni element için tekrar tekrar olay dinleyicisi eklemenize gerek kalmaz, böylece gereksiz DOM işlemlerini ortadan kaldırır.
Örnek:
kopyaladocument.querySelector('#parent').addEventListener('click', (event) => { if (event.target.matches('.child')) { console.log('Child element clicked'); } });
3. Lazy Loading Stratejileri: Yalnızca Gerektiğinde Yükleme Yapın
Lazy loading örneği:
kopyalaconst images = document.querySelectorAll('img[data-src]'); const loadImage = (image) => { image.src = image.dataset.src; }; window.addEventListener('scroll', () => { images.forEach((image) => { if (image.getBoundingClientRect().top < window.innerHeight) { loadImage(image); } }); });
4. Web Worker Kullanımı: UI Thread’i Engellemeyin
Web Worker kullanımı:
kopyala// Ana thread const worker = new Worker('worker.js'); worker.postMessage('Start processing'); // worker.js self.onmessage = function(e) { const result = processData(e.data); postMessage(result); };
5. Memory Leak Önleme: Bellek Sızıntılarını Tespit Edin
İpucu: Event listener'ları ve zamanlayıcıları her kullanımdan sonra temizlemek, bellek sızıntılarını engellemenize yardımcı olur.
Event listener temizleme örneği:
kopyalaconst button = document.querySelector('button'); const handleClick = () => alert('Button clicked'); button.addEventListener('click', handleClick); // Temizleme button.removeEventListener('click', handleClick);
6. CSS ve JavaScript Kombinasyonu: Hızlı ve Etkili Çözümler
CSS animasyonu örneği:
kopyala.button { transition: transform 0.3s ease; } .button:hover { transform: scale(1.1); }
7. Service Worker'lar ile Çevrimdışı Deneyim Sağlama
Service Worker örneği:
kopyalaif ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); }