網站性能優化--性能指標及採集

引言

在平時工做中可能會遇到用戶反饋:「哥們,大家的網站感受很卡啊!」。這種來自用戶的吐槽對前端同窗能夠說是直擊心靈的衝擊。此時就應該好好想一想如何讓用戶再也不出現這樣的吐槽呢。首先就是指標化的瞭解本身的網站。html

經常使用的衡量指標

能夠結合兩張圖

前端

第一張圖是瀏覽器加載整個頁面的時間線,第二張圖則是這個是Google力推的指標,主要從4個視覺反饋階段來描述頁面性能。git

總結一下經常使用的性能指標github

  • 白屏時間:白屏時間是指瀏覽器從響應用戶輸入網址地址,到瀏覽器開始渲染內容的時間。
  • 首屏時間:首屏時間是指瀏覽器從響應用戶輸入網絡地址,到首屏內容渲染完成的時間。 通常是首屏中的圖片加載完畢的時候,咱們認爲是首屏結束的時間點。
  • 徹底加載時間:DOM Tree 構建完成後,開始加載網頁資源,資源徹底加載完成後,從加載開始到此爲網頁的徹底加載時間。
  • 可交互時間 (TTI):用戶第一次能夠和界面進行交互的時間
  • 慢會話 Long Tasks:RAIL有在100毫秒內相應用戶輸入的要求。若是響應超過這個時間就是慢會話

如何採集指標數據

Performance_API瀏覽器

PerformanceTiming中有許多指標,選取幾個比較經常使用的。緩存

  • PerformanceTiming.responseStart:返回瀏覽器從服務器收到(或從本地緩存讀取)第一個字節時的Unix毫秒時間戳。這個能夠用來反映服務器或者是CDN響應的指標。
  • PerformanceTiming.domInteractive:返回當前網頁DOM結構結束解析、開始加載內嵌資源時間,用戶能夠開始輸入交互的時間點
  • PerformanceTiming.loadEventEnd: 整個頁面加載結束的時間點

白屏時間的採集

能夠用
window.performance.getEntriesByType('paint')
返回結果就是FP和FCP
image.png服務器

首屏時間的採集

首屏時間須要從兩塊去衡量,一塊是圖片的加載,一塊是dom的渲染。
圖片的加載時間可使用
window.performance.getEntriesByType('resource')
看一下返回的結果
image.png
須要判斷initiatorType,取出responseEnd。網絡

dom部分則用MutationObserver來監聽dom變化。dom

另外考慮到是首屏,就須要配合getBoundingClientRect來判斷元素是否在首屏內。
最後將兩部分時間取較大值便可oop

拓展一下,若是你的首屏有其餘資源會你也但願確認是否會大於圖片的加載,能夠參考
不一樣資源的加載時間的獲取

TTI的採集

tti採集的庫使用很是簡單

import ttiPolyfill from './path/to/tti-polyfill.js';

ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => {
  // Use `tti` value in some way.
});

長任務的收集

const subscribeBtn = document.querySelector('#subscribe');

subscribeBtn.addEventListener('click', (event) => {
  // Event listener logic goes here...

  const lag = performance.now() - event.timeStamp;
  if (lag > 100) {
    ga('send', 'event', {
      eventCategory: 'Performance Metric'
      eventAction: 'input-latency',
      eventLabel: '#subscribe:click',
      eventValue: Math.round(lag),
      nonInteraction: true,
    });
  }
});

FPS

因爲requestAnimationFrame會在每一幀渲染前被調用,因此fps的計算就依賴於他。

var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now();
  
var loop = function () {
    var now = Date.now();
    var fs = (now - lastFameTime);
    var fps = Math.round(1000 / fs);
  
    lastFameTime = now;
    allFrameCount++;
    frame++;
  
    if (now > 1000 + lastTime) {
        //算出一秒左右的時間內總共渲染了多少幀
        var fps = Math.round((frame * 1000) / (now - lastTime));
        frame = 0;
        lastTime = now;
    };
  
    window.requestAnimationFrame(loop);
}
 
loop();

參考資料

https://www.cnblogs.com/wmhua...
https://www.jianshu.com/p/456...
https://www.cnblogs.com/coco1...

相關文章
相關標籤/搜索