在平時工做中可能會遇到用戶反饋:「哥們,大家的網站感受很卡啊!」。這種來自用戶的吐槽對前端同窗能夠說是直擊心靈的衝擊。此時就應該好好想一想如何讓用戶再也不出現這樣的吐槽呢。首先就是指標化的瞭解本身的網站。html
能夠結合兩張圖前端
第一張圖是瀏覽器加載整個頁面的時間線,第二張圖則是這個是Google力推的指標,主要從4個視覺反饋階段來描述頁面性能。git
總結一下經常使用的性能指標github
PerformanceTiming中有許多指標,選取幾個比較經常使用的。緩存
能夠用window.performance.getEntriesByType('paint')
返回結果就是FP和FCP服務器
首屏時間須要從兩塊去衡量,一塊是圖片的加載,一塊是dom的渲染。
圖片的加載時間可使用window.performance.getEntriesByType('resource')
看一下返回的結果
須要判斷initiatorType,取出responseEnd。網絡
dom部分則用MutationObserver來監聽dom變化。dom
另外考慮到是首屏,就須要配合getBoundingClientRect來判斷元素是否在首屏內。
最後將兩部分時間取較大值便可oop
拓展一下,若是你的首屏有其餘資源會你也但願確認是否會大於圖片的加載,能夠參考
不一樣資源的加載時間的獲取
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, }); } });
因爲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...