WEB API
Performance API
Herhangi bir web sayfasına url girdiğinizde sayfa hemen karşınıza gelmez sayfanın yüklenmesi bazen saniyeler sürer. Bu süredece kullanıcı belki sayfayı kapatır, belki yan taba geçerek başka sayfalarda gezinir. Fakat geliştiriciler için başlangıçtaki bu süreyi ölçmek ve bottleneck varsa tespit edip düzeltmek oldukça önemlidir. Bu tip işler için Performance API’den faydalanırız.
Bu yazı daha önceden başlamış olduğum Web API yazı serisinin devamı niteliğindedir. JS kodları ile işletim sistemi veya tarayıcının native kısımlarına erişmek için sağlanan API’ler olduğundan bahsetmiştim. Performance API altyapısında High Resolution Time kullanarak gecikmeleri ve ölçümlemeleri daha doğru bir zamanlama ile hesaplayabilir.
1. High-Resolution Time
Date.now() <—-> Performance.now()
Performance APIsi zamanı DOMHighResTimeStamp üzerinden tanımlar. Bu şekilde bir API ihtiyacını WebKit engineer Tony Gentilcore şöyle anlatıyor;
Perhaps less often considered is that
Date, based on system time, isn't ideal for real user monitoring either. Most systems run a daemon which regularly synchronizes the time. It is common for the clock to be tweaked a few milliseconds every 15-20 minutes. At that rate about 1% of 10 second intervals measured would be inaccurate.
Normal sistem zamanı kullanımı 10 saniyede %1 zaman kayması yaşandığı yönünde ve bu yöntemin gerçek zamanlı kullanıcı takibinde (RUM) kullanılmak için uygun olmadığı yönünde. Aşağıdaki senaryolar içinde aynısını söyleyebiliriz.
- Kıyaslama (benchmarking)
- Oyun/Animasyon Döngüsü
- Ekran çözünürlüğünün hesaplanması
Konunun daha iyi anlaşılması için Performance Monitoring API’lerine daha yakından bakalım.
High-Resolution Time → Performance Timeline → (Resource Timing → Navigation Timing, User Timing, Server Timing ve FrameTiming) .
2. Resource Timing
Sayfaların yüklenmesi sırasında kaynakların sunucudan, CDN, yüklenmesi sırasında kaynakların yüklenmesini izleyebileceğiniz en iyi yöntem Waterfall Chart gösterilmesidir.
Bu yöntem sayesinde resource ne kadar sürede yüklendiğini diğer kaynakların hangisinin yüklenmesini beklediğini kolayca görebilirsiniz.
Resource Timing => window.performance üzerinden performance.getEntriesByType(“resource”) performance.getEntriesByType("resource")ile kolayca erişilebilir.
Bu elemanlardan her birisi aşağıdaki bilgileri içerir.
- Redirect: startTime, redirectStart — redirectEnd
- App Cache: fetchStart —
- DNS: domainLookupStart — domainLookupEnd
- TCP: connectStart, secureConnectionStart, connectEnd
- Request: requestStart
- Response: responseStart — responseEnd
Request / Response
- fetchStart: resource çekmeye başlangıç zamanıdır. Bu işlem direk network bu istekte bulunmaz öncelikle cache var mı ? (HTTP ve ServiceWorker) yoksa network isteğinde bulunur.
- requestStart: network isteğinin başladığı zaman
- responseStart: ilk byte cevap verisinin tarayıcıya ulaştığı zaman
- responseEnd: son byte cevap verisinin tarayıcıya ulaştığı zaman
- workerStart: ServiceWorker veriyi çektiğinde bu değer atanır, aksi durumlarda hep 0 olarak atanır.
Size
- transferSize : Resource içerdiği toplam HTTP header miktarını içerir
- encodedBodySize : HTTP hariç sıkıştırılmış resource boyutu
- decodedBodySize : HTTP hariç sıkıştırılmamış resource boyutu
Painting Time
- first-paint : Sayfaya ilk pixel’in çizildiği zaman ve süresi
- first-paint-content: Sayfadaki ilk içeriğin çizildiği zaman ve süresi
3. Performance Timeline
Yukarıdaki ResourceTiming performance objesi içerisindeki tiplerden bir tanesidir. Bunun dışında performansı ölçümlemek için farklı entry türleri (mark, measure, navigation, resource, frame ve server) izleyebilmemizi sağlar.
mark : PerformanceMark → UserTiming API
measure : PerformanceMeasure → UserTiming API
navigation: PerformanceNavigationTiming → NavigationTiming API
resource: PerformanceResourceTiming → ResourceTiming API
frame: PerformanceFrameTiming → Frame Timing
server: PerformanceServerTiming → Server Timing
Performance interface üzerinden elemanlara getEntries(), getEntriesByName(), getEntriesByType() metodları ile erişebilirsiniz. veya PerformanceObserver üzerinden istediğiniz türdeki entry türünü dinleyebilir bunlar ile ilgili timeline yakalayabilirsiniz.
4. Navigation Timing
Sayfa ilk yüklenirken veya bir sayfadan diğer sayfaya yönlendirilirken sayfa performanslarını ölçmek için kullanılır. Önceki konuda anlattığımız sarı renkli barları (Resource Timing) ifada eder.
- Unload
- Resource Timing
- Processing (domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete)
- Load (loadEventStart, loadEventEnd)
4.1 Sayfanın Toplam Yüklenme Süresi
Bu kullanıcının sayfayı yönlenmesinden sonra sayfanın en son yüklendiği zaman arasındaki süredir.
loadEventEnd - navigationStart4.2 Sunucuya İstek / Cevap Süresi
responseEnd - requestStart;4.3 Sayfanın Tarayıcıda Render Edilme Süresi
domComplete - domLoading4.4 DNS Çözümlemesi İçin Geçen Süre
domainLookupEnd - domainLookupStart5. User Timing
Kullanıcının kendine özel performance noktaları oluşturup arasında geçen süreyi ölçmeyi sağlar.
performance.mark Kodda istediğiniz noktaları işaretlemenizi sağlar.
performance.mark('A');
performance.mark('B');
....performance.measure Kodda istediğiniz işaretli noktalar arasındaki süreyi ölçmenizi sağlar.
performance.measure('A to B', 'A', 'B');Koddaki mark kaldırmanızı sağlar.
performance.clearMarks();Not: Benzer bir örneği Node.JS ortamında yaptığım ve aynı interface kullandığım için (Node.js İşlemler Arasındaki Süreyi Ölçmek) yazıma bakabilirsiniz.
6. Server Timing
Request/Response sürecinde header Backend Server Metrikleri ile ilgili (e.g. database read/write, CPU time, file system access, etc.) sunucu bilgilerine erişebilirsiniz.
HTTPHeader kısmında Server-Timing ile ilgili metrikleri isteyip sonra client tarafta bu bilgileri kullanabilirsiniz. (MDN PerformanceTimingInterface)
// Single metric without value
Server-Timing: missedCache
// Single metric with value
Server-Timing: cpu;dur=2.4
// Single metric with description and value
Server-Timing: cache;desc="Cache Read";dur=23.2
// Two metrics with value
Server-Timing: db;dur=53, app;dur=47.2
// Server-Timing as trailer
Trailer: Server-Timing
--- response body ---
Server-Timing: total;dur=123.47. Frame Timing
Web Uygulamaları runtime performans erişip , tarayıcı event loop hakkında bilgi almasını sağlar. EventLoop yavaşlamanın (Tarayıcı Event Loop hakkında yazım)
- Rendering
- Input Processing (Input Girdi Alanları UI Neden Bloklar)
- Diğer Önemli Zaman alan İşler
Referanslar
- W3C Performance Timing Primer
- How to practically use Performance API to measure performance
- W3C Navigation Timing
- When milliseconds are not enough: performance.now
- Custom Metrics
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
