Photo by sylvie charron on Unsplash

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()
Date vs Performance

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 TimePerformance Timeline → (Resource TimingNavigation Timing, User Timing, Server Timing ve FrameTiming) .

from https://w3c.github.io/perf-timing-primer/ — Perf Monitoring

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.

from https://w3c.github.io/perf-timing-primer/ Resource Timing API

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.
Performance Resource Timing

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
Resource Timing
PerformanceResourceTiming Element

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)
https://w3c.github.io/perf-timing-primer/#the-performancenavigationtiming-attributes
window.performance.timing

Bu kullanıcının sayfayı yönlenmesinden sonra sayfanın en son yüklendiği zaman arasındaki süredir.

loadEventEnd - navigationStart
responseEnd - requestStart;
domComplete - domLoading
domainLookupEnd - domainLookupStart

5. 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.4

7. 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)

from https://www.w3.org/TR/frame-timing/

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store