Web Programlama Eğitimi: Passive Listener ile Kaydırma Gecikmesi

Web programlama eğitimi ile kaydırma gecikmesini doğru teşhis etmek

Kaydırma şikayetini yalnızca FPS sayacıyla değerlendirmeyin. Chrome DevTools Performance panelinde gerçek bir telefon veya en azından sabit CPU throttling ile kayıt alın; ardından izde Input, Main ve Compositor şeritlerini birlikte inceleyin. Wheel veya touchmove girdisinden sonra Main şeridinde 16.7 ms'yi aşan JavaScript, style recalculation ya da layout blokları varsa, compositor yeni scroll offset'ini zamanında çizemez. Bir javascript eğitimi örneği olarak aşağıdaki kodla Long Animation Frame kayıtlarını kullanıcı etkileşimleriyle ilişkilendirin. Bu API her tarayıcıda bulunmayabileceği için feature detection zorunludur.

Passive listener ve touch-action ile compositor beklemesini kaldırmak

Tarayıcı, bir touchmove ya da wheel listener'ının preventDefault() çağırıp çağırmayacağını bilmiyorsa, varsayılan kaydırmayı Main thread sonucuna kadar erteleyebilir. { passive: true } bu iptalin yapılmayacağını bildirir; mekanizma JavaScript'i hızlandırmak değil, input-to-scroll kararındaki senkron beklemeyi kaldırmaktır. Dokunmatik carousel gibi gerçekten kaydırmayı devralan bir bileşende passive kullanmak doğru değildir. Bu durumda davranışı JavaScript ile iptal etmek yerine mümkünse CSS'te touch-action ilan edin.

ReactJS eğitimi, Angular eğitimi ve VueJS eğitimi için handler tuzakları

reactjs eğitimi sırasında sık görülen hata, scroll konumunu her olayda state'e yazıp tüm sayfa ağacını render etmektir. React'te geçici konumu ref'te tutun, rAF içinde yalnızca kullanıcıya görünmesi gereken türetilmiş değeri state'e aktarın. Bu, React render'ını event frekansından frame frekansına sınırlar. Profil doğrulaması için React DevTools Profiler'da scroll sırasında commit sayısını kaydedin; değişiklikten sonra commit sayısının event sayısına değil ekran yenileme sayısına yakın olması gerekir.

Frontend framework karşılaştırması yaparken DOM olay katmanını ayırmak

Frontend framework karşılaştırması yaparken React, Angular veya Vue'nun render modelini passive listener semantiğiyle karıştırmayın. addEventListener seçeneği tarayıcı API'sidir; framework template sözdizimi her zaman bu seçeneği yüzeye çıkarmaz. Örneğin Angular'da native elemente doğrudan listener eklemek, Vue'da onMounted içinde temizleme fonksiyonu döndürmek ve React'te effect cleanup kullanmak, listener yaşam döngüsünü bileşen yaşam döngüsüne bağlar. Chrome DevTools Elements panelindeki Event Listeners sekmesiyle aynı node üzerinde hem framework hem özel listener eklenip eklenmediğini kontrol edin.

CI içinde kaydırma regresyon bütçesi kurmak

Manuel DevTools kaydı teşhis içindir; regresyonu yakalamak için Playwright ile sabit bir wheel senaryosu çalıştırıp trace saklayın. Playwright doğrudan LoAF bütçesi vermez, ancak uygulamanın topladığı long-animation-frame işaretlerini window üzerinde test edebilirsiniz. CI makinesindeki mutlak süreler değişken olduğundan 16.7 ms gibi sert bir tekil eşik yerine aynı commit'teki referans akışa göre LoAF sayısı ve en kötü blockingDuration artışını takip edin.

Sık Sorulan Sorular

Web programlama eğitimi içinde passive listener ne zaman kullanılmamalı?

Gesture'ı uygulamanın devralması ve preventDefault() ile tarayıcı davranışını engellemesi gerekiyorsa passive kullanmayın. Örneğin yatay sürükleme bileşeninde önce CSS touch-action: pan-y veya pan-x ile izinli ekseni tanımlayın. DevTools Performance kaydında Main thread input beklemesini ve gesture davranışını gerçek dokunmatik cihazda birlikte doğrulayın.

ReactJS eğitimi için scroll event render sayısı nasıl ölçülür?

React DevTools Profiler'da kaydı başlatın, sabit uzunlukta bir scroll senaryosu oynatın ve commit sayısı ile en pahalı component render süresini alın. Her event'te setState yapan sürüm ile ref artı requestAnimationFrame kullanan sürümü aynı veri setinde karşılaştırın. Ayrıca Chrome Performance izinde React commit'lerinin Layout bloklarıyla çakışıp çakışmadığını kontrol edin.

Angular eğitimi projelerinde scroll olayında change detection nasıl azaltılır?

Listener'ı NgZone.runOutsideAngular() içinde native addEventListener ile kaydedin ve yalnızca görünür UI değeri değiştiğinde zone.run() çağırın. Angular DevTools Profiler'da önce ve sonra change detection tur sayısını ölçün. Listener temizliğini DestroyRef.onDestroy ile yapın; aksi halde route değişiminden sonra eski host node veya closure gereksiz işlem üretmeye devam edebilir.

Frontend framework karşılaştırması yaparken passive listener farkı nedir?

Passive seçeneği React, Angular ve Vue'nun render algoritmasından bağımsız bir DOM EventTarget sözleşmesidir. Fark, framework'ün event handler'ı sonrasında ne kadar render ve reactivity işi başlattığıdır. Karşılaştırmayı Chrome DevTools Input/Main trace'i, framework profiler'ındaki commit veya change detection sayısı ve aynı wheel senaryosundaki LoAF değerleriyle yapın.