成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Getting started in window.performance

wthee / 2439人閱讀

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

如何理解 window.performance

window.performance 是由 W3C 性能小組提出的用于精確計(jì)算網(wǎng)頁(yè)性能數(shù)據(jù)的特性，它返一個(gè) Performance 對(duì)象，支持 IE9 以上的所有瀏覽器，這里給出對(duì)象的原型：

Performance.timing

返回 PerformanceTiming 對(duì)象，包含延遲相關(guān)的性能信息。

Performance.navigation

返回 PerformanceNavigation 對(duì)象，該對(duì)象表示在當(dāng)前給定瀏覽上下文中網(wǎng)頁(yè)導(dǎo)航的類型（TYPE_BACK_FORWARD，TYPE_NAVIGATE，TYPE_RELOAD，TYPE_RESERVED）以及次數(shù)。

performance.memory

在 Chrome 中添加的一個(gè)非標(biāo)準(zhǔn)擴(kuò)展，返回內(nèi)存占用的基本信息。（盡量避免使用非標(biāo)準(zhǔn)化API）

Performance.timeOrigin

返回關(guān)于性能評(píng)估的開(kāi)始時(shí)間（高分辨率時(shí)間戳）

Performance.onresourcetimingbufferfull

當(dāng) resourcetimingbufferfull 事件觸發(fā)時(shí)，作為事件處理回調(diào)

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 應(yīng)該滿足至少 150 個(gè)以上

為何使用 Performance

通常熟悉 Chrome 開(kāi)發(fā)者工具的朋友都會(huì)在開(kāi)發(fā)環(huán)境下用到網(wǎng)絡(luò)面板的相關(guān)操作，當(dāng)我們開(kāi)啟記錄功能時(shí)，就會(huì)實(shí)時(shí)傳回關(guān)于網(wǎng)頁(yè)響應(yīng)階段的性能數(shù)據(jù)，但當(dāng)我們需要統(tǒng)計(jì)分析用戶打開(kāi)網(wǎng)頁(yè)時(shí)的性能，因此我們將 performance 原始信息或通過(guò)簡(jiǎn)單計(jì)算后的信息上傳到服務(wù)器，配合其他網(wǎng)絡(luò)屬性（例如 HTTP 請(qǐng)求頭信息），就可以很好地進(jìn)行性能上報(bào)。

項(xiàng)目中的應(yīng)用

1.判斷是否刷新頁(yè)面

const performance = window.performance

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

這里的 performance.navigation.type 返回一個(gè)整數(shù)值，表示網(wǎng)頁(yè)的加載來(lái)源，有以下幾種情況：

返回值：0
類型常量：performance.navigation.TYPE_NAVIGATENEXT
描述：網(wǎng)頁(yè)通過(guò)點(diǎn)擊鏈接、地址欄輸入、表單提交、腳本操作等方式加載

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

返回值：2
類型常量：performance.navigation.TYPE_BACK_FORWARD
描述；網(wǎng)頁(yè)通過(guò) 前進(jìn) 或 后退 按鈕加載

返回值：255
類型常量：performance.navigation.TYPE_UNDEFINED
描述：網(wǎng)頁(yè)通過(guò)其它 任何可執(zhí)行的來(lái)源 加載

此外，通過(guò) performance.navigation.redirectCount 可以獲取當(dāng)前網(wǎng)頁(yè)重定向跳轉(zhuǎn)的次數(shù)

2.測(cè)試函數(shù)執(zhí)行時(shí)間

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

未完待續(xù)...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92313.html

相關(guān)文章

  • 前端質(zhì)量監(jiān)控之頁(yè)面性能相關(guān)

    摘要：前言最近有幸參與一個(gè)前端質(zhì)量監(jiān)控類項(xiàng)目的重構(gòu)，算是個(gè)人初次接觸到前端質(zhì)量監(jiān)控相關(guān)的知識(shí)，對(duì)于其中的性能統(tǒng)計(jì)部分很感興趣，查詢資料之后寫(xiě)了文章，作為個(gè)人學(xué)習(xí)記錄，如有錯(cuò)誤，敬請(qǐng)斧正頁(yè)面整體性能通過(guò)瀏覽器提供的方法，我們能夠得到網(wǎng)頁(yè)每個(gè)處理階段 前言 最近有幸參與一個(gè)前端質(zhì)量監(jiān)控類項(xiàng)目的重構(gòu)，算是個(gè)人初次接觸到前端質(zhì)量監(jiān)控相關(guān)的知識(shí)，對(duì)于其中的性能統(tǒng)計(jì)部分很感興趣，查詢資料之后寫(xiě)了文章，作...

    Shihira 評(píng)論0 收藏0

  • 解析nodeJS模塊源碼 親手打造基于ES6的觀察者系統(tǒng)

    摘要：為指定事件注冊(cè)一個(gè)單次監(jiān)聽(tīng)器，即監(jiān)聽(tīng)器最多只會(huì)觸發(fā)一次，觸發(fā)后立刻解除該監(jiān)聽(tīng)器。移除指定事件的某個(gè)監(jiān)聽(tīng)器，監(jiān)聽(tīng)器必須是該事件已經(jīng)注冊(cè)過(guò)的監(jiān)聽(tīng)器。返回指定事件的監(jiān)聽(tīng)器數(shù)組。如何創(chuàng)建空對(duì)象我們已經(jīng)了解到，是要來(lái)儲(chǔ)存監(jiān)聽(tīng)事件監(jiān)聽(tīng)器數(shù)組的。 毫無(wú)疑問(wèn)，nodeJS改變了整個(gè)前端開(kāi)發(fā)生態(tài)。本文通過(guò)分析nodeJS當(dāng)中events模塊源碼，由淺入深，動(dòng)手實(shí)現(xiàn)了屬于自己的ES6事件觀察者系統(tǒng)。千萬(wàn)不...

    csRyan 評(píng)論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 評(píng)論0 收藏0

  • 從一次有趣的實(shí)驗(yàn)學(xué)習(xí)性能優(yōu)化

    摘要：從一次實(shí)驗(yàn)學(xué)習(xí)性能優(yōu)化之接口詳解下圖是接口的屬性提供給定頁(yè)面的與時(shí)間相關(guān)的性能信息包含了頁(yè)面瀏覽上下文的導(dǎo)航信息，比如大量獲取資源的重定向。返回當(dāng)前網(wǎng)頁(yè)事件的回調(diào)函數(shù)運(yùn)行結(jié)束時(shí)的毫秒時(shí)間戳。 從一次實(shí)驗(yàn)學(xué)習(xí)性能優(yōu)化 Web API之Performance 接口詳解 下圖是Performance 接口的屬性,提供給定頁(yè)面的與時(shí)間相關(guān)的性能信息.showImg(https://segmen...

    canger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<