Web 前端頁面性能監控指標

Web 前端頁面性能監控指標

性能監控 / 性能指標 / 性能優化

白屏時間計算

FCP

白屏時間：從瀏覽器輸入地址並回車後到頁面開始有內容的時間；

首屏時間計算

FMP

首屏時間：從瀏覽器輸入地址並回車後到首屏內容渲染完畢的時間；

不須要交互 ？ TTI

Navigation Timing API

❓ Navigation Timing Level 2, W3C Working Draft 21 January 2020

https://www.w3.org/TR/navigation-timing-2/

✅ Navigation Timing, W3C Recommendation 17 December 2012

https://www.w3.org/TR/navigation-timing/

https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing

window.addEventListener("load", function() {
  let now = new Date().getTime();
  let loadingTime = now - performance.timing.navigationStart;
 
  document.querySelector(".output").innerText =
        loadingTime + " ms";
}, false);

window.addEventListener("load", function() {
  let now = new Date().getTime();
  let loadingTime = now - performance.timing.navigationStart;
   
  output = "Load time: " + loadingTime + " ms<br/>";
  output += "Navigation type: ";
 
  switch(performance.navigation.type) {
      case PerformanceNavigation.TYPE_NAVIGATE:
        output += "Navigation";
      break;
    case PerformanceNavigation.TYPE_RELOAD:
        output += "Reload";
      break;
    case PerformanceNavigation.TYPE_BACK_FORWARD:
        output += "History";
      break;
    default:
        output += "Unknown";
      break;
  }
 
  output += "<br/>Redirects: " + 
      performance.navigation.redirectCount;
  document.querySelector(".output").innerHTML = output;
}, false);

https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing

TTFB

Time To First Byte
第一個字節到達的時間

TTFP

Time To First Paint
第一次繪製的時間

https://developers.google.com/web/fundamentals/glossary

TBT

Total Blocking Time
總阻塞時間

https://web.dev/tbt/

DCL

DOMContentLoaded Event
DOM 內容加載完成 事件

FP

First Paint
首次繪製

FCP

First Contentful Paint
首次有內容的繪製

https://web.dev/fcp/

https://web.dev/first-contentful-paint

FMP

First Meaningful Paint
首次有意義的繪製

https://web.dev/first-meaningful-paint/

LCP

Largest Contentful Paint
最大內容的繪製

https://web.dev/lcp/

TTI

Time to Interactive
可交互時間

https://web.dev/tti/

FID

First Input Delay
首次輸入延遲

https://web.dev/fid/

CLS

Cumulative Layout Shift
累積佈局移位

https://web.dev/cls/

SI

Speed Index
速度指數

https://web.dev/speed-index/

refs

Chrome DevTools & performance / 性能指標

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

https://web.dev/metrics/

https://web.dev/user-centric-performance-metrics/

https://web.dev/custom-metrics/

http://www.javashuo.com/article/p-sqxeadmt-vd.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發佈文章使用：只容許註冊用戶才能夠訪問！