Getting started in window.performance

wthee 發布于2019-08-22 11:23 / 2433人閱讀

摘要：如何理解是由性能小組提出的用于精確計算網頁性能數據的特性，它返一個對象，支持以上的所有瀏覽器，這里給出對象的原型返回對象，包含延遲相關的性能信息。返回對象，該對象表示在當前給定瀏覽上下文中網頁導航的類型，，，以及次數。

如何理解 window.performance

window.performance 是由 W3C 性能小組提出的用于精確計算網頁性能數據的特性，它返一個 Performance 對象，支持 IE9 以上的所有瀏覽器，這里給出對象的原型：

Performance.timing

返回 PerformanceTiming 對象，包含延遲相關的性能信息。

Performance.navigation

返回 PerformanceNavigation 對象，該對象表示在當前給定瀏覽上下文中網頁導航的類型（TYPE_BACK_FORWARD，TYPE_NAVIGATE，TYPE_RELOAD，TYPE_RESERVED）以及次數。

performance.memory

在 Chrome 中添加的一個非標準擴展，返回內存占用的基本信息。（盡量避免使用非標準化API）

Performance.timeOrigin

返回關于性能評估的開始時間（高分辨率時間戳）

Performance.onresourcetimingbufferfull

當 resourcetimingbufferfull 事件觸發時，作為事件處理回調

function buffer_full_handler(event) {
    console.log("[Warning]: Resource Timing Buffer is full");
    performance.setResourceTimingBufferSize(200); // size >= 150
}

function initPerformanceMeasurement() {
    if (performance === undefined) {
        console.log("[Warning]: Performance interface is not supported");
        return
    }
    // Set a callback if the resource buffer becomes filled
    performance.onresourcetimingbufferfull = buffer_full_handler;
}

document.body.onload = initPerformanceMeasurement;

通常建議 performance entry 應該滿足至少 150 個以上

為何使用 Performance

通常熟悉 Chrome 開發者工具的朋友都會在開發環境下用到網絡面板的相關操作，當我們開啟記錄功能時，就會實時傳回關于網頁響應階段的性能數據，但當我們需要統計分析用戶打開網頁時的性能，因此我們將 performance 原始信息或通過簡單計算后的信息上傳到服務器，配合其他網絡屬性（例如 HTTP 請求頭信息），就可以很好地進行性能上報。

項目中的應用

1.判斷是否刷新頁面

const performance = window.performance

if(performance.navigation.type === 1) {
    console.log("Page was not reloaded.")
} else {
    console.log("Page was reloaded.")
}

這里的 performance.navigation.type 返回一個整數值，表示網頁的加載來源，有以下幾種情況：

返回值：0
類型常量：performance.navigation.TYPE_NAVIGATENEXT
描述：網頁通過點擊鏈接、地址欄輸入、表單提交、腳本操作等方式加載

返回值：1
類型常量：performance.navigation.TYPE_RELOAD
描述：網頁通過刷新按鈕或者 location.reload() 方法加載

返回值：2
類型常量：performance.navigation.TYPE_BACK_FORWARD
描述；網頁通過前進或后退按鈕加載

返回值：255
類型常量：performance.navigation.TYPE_UNDEFINED
描述：網頁通過其它 任何可執行的來源 加載

此外，通過 performance.navigation.redirectCount 可以獲取當前網頁重定向跳轉的次數

2.測試函數執行時間

function fac() {
    return n === 1 ? 1 : n * arguments.callee(n - 1)
}

let t1 = window.performance.now()
fac(100)
let t2 = window.performance.now()
console.log("diff: ", t2 - t1, " ms")

// output: diff: 0.14500000001862645 ms

未完待續...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92313.html

前端質量監控之頁面性能相關

摘要：前言最近有幸參與一個前端質量監控類項目的重構，算是個人初次接觸到前端質量監控相關的知識，對于其中的性能統計部分很感興趣，查詢資料之后寫了文章，作為個人學習記錄，如有錯誤，敬請斧正頁面整體性能通過瀏覽器提供的方法，我們能夠得到網頁每個處理階段前言最近有幸參與一個前端質量監控類項目的重構，算是個人初次接觸到前端質量監控相關的知識，對于其中的性能統計部分很感興趣，查詢資料之后寫了文章，作...

Shihira 2019-08-23 12:56 評論0 收藏0
解析nodeJS模塊源碼親手打造基于ES6的觀察者系統

摘要：為指定事件注冊一個單次監聽器，即監聽器最多只會觸發一次，觸發后立刻解除該監聽器。移除指定事件的某個監聽器，監聽器必須是該事件已經注冊過的監聽器。返回指定事件的監聽器數組。如何創建空對象我們已經了解到，是要來儲存監聽事件監聽器數組的。毫無疑問，nodeJS改變了整個前端開發生態。本文通過分析nodeJS當中events模塊源碼，由淺入深，動手實現了屬于自己的ES6事件觀察者系統。千萬不...

csRyan 2019-08-20 15:19 評論0 收藏0
【Getting Started with pandas】筆記一

In [1]: from pandas import Series, DataFrame In [2]: import pandas as pd In [3]: obj = Series([4,7,-5,3]) In [4]: obj Out[4]: 0 4 1 7 2 -5 3 3 dtype: int64

ad6623 2019-07-24 17:51 評論0 收藏0
從一次有趣的實驗學習性能優化

摘要：從一次實驗學習性能優化之接口詳解下圖是接口的屬性提供給定頁面的與時間相關的性能信息包含了頁面瀏覽上下文的導航信息，比如大量獲取資源的重定向。返回當前網頁事件的回調函數運行結束時的毫秒時間戳。從一次實驗學習性能優化 Web API之Performance 接口詳解下圖是Performance 接口的屬性,提供給定頁面的與時間相關的性能信息.showImg(https://segmen...

canger 2019-08-20 18:04 評論0 收藏0