引言
在平時工作中可能會遇到用户反饋：“哥們，你們的網站感覺很卡啊！”。這種來自用户的吐槽對前端同學可以説是直擊心靈的衝擊。此時就應該好好想想如何讓用户不再出現這樣的吐槽呢。首先就是指標化的瞭解自己的網站。
常用的衡量指標
可以結合兩張圖
第一張圖是瀏覽器加載整個頁面的時間線，第二張圖則是這個是Google力推的指標，主要從4個視覺反饋階段來描述頁面性能。
總結一下常用的性能指標
- 白屏時間：白屏時間是指瀏覽器從響應用户輸入網址地址，到瀏覽器開始渲染內容的時間。
- 首屏時間：首屏時間是指瀏覽器從響應用户輸入網絡地址，到首屏內容渲染完成的時間。 一般是首屏中的圖片加載完畢的時候，我們認為是首屏結束的時間點。
- 完全加載時間：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
首屏時間的採集
首屏時間需要從兩塊去衡量，一塊是圖片的加載，一塊是dom的渲染。
圖片的加載時間可以使用
window.performance.getEntriesByType('resource')
看一下返回的結果
需要判斷initiatorType，取出responseEnd。
dom部分則用MutationObserver來監聽dom變化。
另外考慮到是首屏，就需要配合getBoundingClientRect來判斷元素是否在首屏內。
最後將兩部分時間取較大值即可
拓展一下，如果你的首屏有其他資源會你也希望確認是否會大於圖片的加載，可以參考
不同資源的加載時間的獲取
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...
