const entryHandler = (list) => {            for (const entry of list.getEntries()) {        if (entry.name === 'first-paint') {            observer.disconnect()        }
       console.log(entry)    }}
const observer = new PerformanceObserver(entryHandler)// buffered 屬性表示是否觀察緩存數(shù)據(jù)，也就是說(shuō)觀察代碼添加時(shí)機(jī)比事情觸發(fā)時(shí)機(jī)晚也沒關(guān)系。observer.observe({ type: 'paint', buffered: true })

{    duration: 0,    entryType: "paint",    name: "first-paint",    startTime: 359, // fp 時(shí)間}

const entryHandler = (list) => {            for (const entry of list.getEntries()) {        if (entry.name === 'first-contentful-paint') {            observer.disconnect()        }
        console.log(entry)    }}
const observer = new PerformanceObserver(entryHandler)observer.observe({ type: 'paint', buffered: true })

{    duration: 0,    entryType: "paint",    name: "first-contentful-paint",    startTime: 459, // fcp 時(shí)間}

const entryHandler = (list) => {    if (observer) {        observer.disconnect()    }
    for (const entry of list.getEntries()) {        console.log(entry)    }}
const observer = new PerformanceObserver(entryHandler)observer.observe({ type: 'largest-contentful-paint', buffered: true })

{    duration: 0,    element: p,    entryType: "largest-contentful-paint",    id: "",    loadTime: 0,    name: "",    renderTime: 1021.299,    size: 37932,    startTime: 1021.299,    url: "",}

布局偏移分?jǐn)?shù) = 影響分?jǐn)?shù) * 距離分?jǐn)?shù)

let sessionValue = 0let sessionEntries = []const cls = {    subType: 'layout-shift',    name: 'layout-shift',    type: 'performance',    pageURL: getPageURL(),    value: 0,}
const entryHandler = (list) => {    for (const entry of list.getEntries()) {        // Only count layout shifts without recent user input.        if (!entry.hadRecentInput) {            const firstSessionEntry = sessionEntries[0]            const lastSessionEntry = sessionEntries[sessionEntries.length - 1]
            // If the entry occurred less than 1 second after the previous entry and            // less than 5 seconds after the first entry in the session, include the            // entry in the current session. Otherwise, start a new session.            if (                sessionValue                && entry.startTime - lastSessionEntry.startTime < 1000                && entry.startTime - firstSessionEntry.startTime < 5000            ) {                sessionValue += entry.value                sessionEntries.push(formatCLSEntry(entry))            } else {                sessionValue = entry.value                sessionEntries = [formatCLSEntry(entry)]            }
            // If the current session value is larger than the current CLS value,            // update CLS and the entries contributing to it.            if (sessionValue > cls.value) {                cls.value = sessionValue                cls.entries = sessionEntries                cls.startTime = performance.now()                lazyReportCache(deepCopy(cls))            }        }    }}
const observer = new PerformanceObserver(entryHandler)observer.observe({ type: 'layout-shift', buffered: true })

{  duration: 0,  entryType: "layout-shift",  hadRecentInput: false,  lastInputTime: 0,  name: "",  sources: (2) [LayoutShiftAttribution, LayoutShiftAttribution],  startTime: 1176.199999999255,  value: 0.000005752046026677329,}

import { lazyReportCache } from '../utils/report'
['load', 'DOMContentLoaded'].forEach(type => onEvent(type))function onEvent(type) {    function callback() {        lazyReportCache({            type: 'performance',            subType: type.toLocaleLowerCase(),            startTime: performance.now(),        })
        window.removeEventListener(type, callback, true)    }
    window.addEventListener(type, callback, true)}

<script>    setTimeout(() => {        document.body.innerHTML = `            <div>                <!-- 省略一堆代碼... -->            </div>        `    }, 3000)</script>

const next = window.requestAnimationFrame ? requestAnimationFrame : setTimeoutconst ignoreDOMList = ['STYLE', 'SCRIPT', 'LINK']
observer = new MutationObserver(mutationList => {    const entry = {        children: [],    }
    for (const mutation of mutationList) {        if (mutation.addedNodes.length && isInScreen(mutation.target)) {             // ...        }    }
    if (entry.children.length) {        entries.push(entry)        next(() => {            entry.startTime = performance.now()        })    }})
observer.observe(document, {    childList: true,    subtree: true,})

const viewportWidth = window.innerWidthconst viewportHeight = window.innerHeight
// dom 對(duì)象是否在屏幕內(nèi)function isInScreen(dom) {    const rectInfo = dom.getBoundingClientRect()    if (rectInfo.left < viewportWidth && rectInfo.top < viewportHeight) {        return true    }
    return false}

function getRenderTime() {    let startTime = 0    entries.forEach(entry => {        if (entry.startTime > startTime) {            startTime = entry.startTime        }    })
    // 需要和當(dāng)前頁(yè)面所有加載圖片的時(shí)間做對(duì)比，取最大值    // 圖片請(qǐng)求時(shí)間要小于 startTime，響應(yīng)結(jié)束時(shí)間要大于 startTime    performance.getEntriesByType('resource').forEach(item => {        if (            item.initiatorType === 'img'            && item.fetchStart < startTime             && item.responseEnd > startTime        ) {            startTime = item.responseEnd        }    })
    return startTime}

let isOnLoaded = falseexecuteAfterLoad(() => {    isOnLoaded = true})
let timerlet observerfunction checkDOMChange() {    clearTimeout(timer)    timer = setTimeout(() => {        // 等 load、lcp 事件觸發(fā)后并且 DOM 樹不再變化時(shí)，計(jì)算首屏渲染時(shí)間        if (isOnLoaded && isLCPDone()) {            observer && observer.disconnect()            lazyReportCache({                type: 'performance',                subType: 'first-screen-paint',                startTime: getRenderTime(),                pageURL: getPageURL(),            })
            entries = null        } else {            checkDOMChange()        }    }, 500)}

originalProto.open = function newOpen(...args) {    this.url = args[1]    this.method = args[0]    originalOpen.apply(this, args)}
originalProto.send = function newSend(...args) {    this.startTime = Date.now()
    const onLoadend = () => {        this.endTime = Date.now()        this.duration = this.endTime - this.startTime
        const { status, duration, startTime, endTime, url, method } = this        const reportData = {            status,            duration,            startTime,            endTime,            url,            method: (method || 'GET').toUpperCase(),            success: status >= 200 && status < 300,            subType: 'xhr',            type: 'performance',        }
        lazyReportCache(reportData)
        this.removeEventListener('loadend', onLoadend, true)    }
    this.addEventListener('loadend', onLoadend, true)    originalSend.apply(this, args)}

const originalFetch = window.fetch
function overwriteFetch() {    window.fetch = function newFetch(url, config) {        const startTime = Date.now()        const reportData = {            startTime,            url,            method: (config?.method || 'GET').toUpperCase(),            subType: 'fetch',            type: 'performance',        }
        return originalFetch(url, config)        .then(res => {            reportData.endTime = Date.now()            reportData.duration = reportData.endTime - reportData.startTime
            const data = res.clone()            reportData.status = data.status            reportData.success = data.ok
            lazyReportCache(reportData)
            return res        })        .catch(err => {            reportData.endTime = Date.now()            reportData.duration = reportData.endTime - reportData.startTime            reportData.status = 0            reportData.success = false
            lazyReportCache(reportData)
            throw err        })    }}

{    name: entry.name, // 資源名稱    subType: entryType,    type: 'performance',    sourceType: entry.initiatorType, // 資源類型    duration: entry.duration, // 資源加載耗時(shí)    dns: entry.domainLookupEnd - entry.domainLookupStart, // DNS 耗時(shí)    tcp: entry.connectEnd - entry.connectStart, // 建立 tcp 連接耗時(shí)    redirect: entry.redirectEnd - entry.redirectStart, // 重定向耗時(shí)    ttfb: entry.responseStart, // 首字節(jié)時(shí)間    protocol: entry.nextHopProtocol, // 請(qǐng)求協(xié)議    responseBodySize: entry.encodedBodySize, // 響應(yīng)內(nèi)容大小    responseHeaderSize: entry.transferSize - entry.encodedBodySize, // 響應(yīng)頭部大小    resourceSize: entry.decodedBodySize, // 資源解壓后的大小    isCache: isCache(entry), // 是否命中緩存    startTime: performance.now(),}

function isCache(entry) {    // 直接從緩存讀取或 304    return entry.transferSize === 0 || (entry.transferSize !== 0 && entry.encodedBodySize === 0)}

window.addEventListener('pageshow', function(event) {  // 如果該屬性為 true，表示是從 bfc 中恢復(fù)的頁(yè)面  if (event.persisted) {    console.log('This page was restored from the bfcache.');  } else {    console.log('This page was loaded normally.');  }});

onBFCacheRestore(event => {    requestAnimationFrame(() => {        ['first-paint', 'first-contentful-paint'].forEach(type => {            lazyReportCache({                startTime: performance.now() - event.timeStamp,                name: type,                subType: type,                type: 'performance',                pageURL: getPageURL(),                bfc: true,            })        })    })})

const next = window.requestAnimationFrame     ? requestAnimationFrame : (callback) => { setTimeout(callback, 1000 / 60) }const frames = []export default function fps() {    let frame = 0    let lastSecond = Date.now()
    function calculateFPS() {        frame++        const now = Date.now()        if (lastSecond + 1000 <= now) {            // 由于 now - lastSecond 的單位是毫秒，所以 frame 要 * 1000            const fps = Math.round((frame * 1000) / (now - lastSecond))            frames.push(fps)
            frame = 0            lastSecond = now        }
        // 避免上報(bào)太快，緩存一定數(shù)量再上報(bào)        if (frames.length >= 60) {            report(deepCopy({                frames,                type: 'performace',                subType: 'fps',            }))
            frames.length = 0        }        next(calculateFPS)    }    calculateFPS()}

export function isBlocking(fpsList, below = 20, last = 3) {    let count = 0    for (let i = 0; i < fpsList.length; i++) {        if (fpsList[i] && fpsList[i] < below) {            count++        } else {            count = 0        }
        if (count >= last) {            return true        }    }
    return false}

export default function onVueRouter(Vue, router) {    let isFirst = true    let startTime    router.beforeEach((to, from, next) => {        // 首次進(jìn)入頁(yè)面已經(jīng)有其他統(tǒng)計(jì)的渲染時(shí)間可用        if (isFirst) {            isFirst = false            return next()        }
        // 給 router 新增一個(gè)字段，表示是否要計(jì)算渲染時(shí)間        // 只有路由跳轉(zhuǎn)才需要計(jì)算        router.needCalculateRenderTime = true        startTime = performance.now()
        next()    })
    let timer    Vue.mixin({        mounted() {            if (!router.needCalculateRenderTime) return
            this.$nextTick(() => {                // 僅在整個(gè)視圖都被渲染之后才會(huì)運(yùn)行的代碼                const now = performance.now()                clearTimeout(timer)
                timer = setTimeout(() => {                    router.needCalculateRenderTime = false                    lazyReportCache({                        type: 'performance',                        subType: 'vue-router-change-paint',                        duration: now - startTime,                        startTime: now,                        pageURL: getPageURL(),                    })                }, 1000)            })        },    })}

// 捕獲資源加載失敗錯(cuò)誤 js css img...window.addEventListener('error', e => {    const target = e.target    if (!target) return
    if (target.src || target.href) {        const url = target.src || target.href        lazyReportCache({            url,            type: 'error',            subType: 'resource',            startTime: e.timeStamp,            html: target.outerHTML,            resourceType: target.tagName,            paths: e.path.map(item => item.tagName).filter(Boolean),            pageURL: getPageURL(),        })    }}, true)

// 監(jiān)聽 js 錯(cuò)誤window.onerror = (msg, url, line, column, error) => {    lazyReportCache({        msg,        line,        column,        error: error.stack,        subType: 'js',        pageURL: url,        type: 'error',        startTime: performance.now(),    })}

// 監(jiān)聽 promise 錯(cuò)誤 缺點(diǎn)是獲取不到列數(shù)據(jù)window.addEventListener('unhandledrejection', e => {    lazyReportCache({        reason: e.reason?.stack,        subType: 'promise',        type: 'error',        startTime: e.timeStamp,        pageURL: getPageURL(),    })})

{    line: 1,    column: 17,    file: 'https:/www.xxx.com/bundlejs',}

async function parse(error) {    const mapObj = JSON.parse(getMapFileContent(error.url))    const consumer = await new sourceMap.SourceMapConsumer(mapObj)    // 將 webpack://source-map-demo/./src/index.js 文件中的 ./ 去掉    const sources = mapObj.sources.map(item => format(item))    // 根據(jù)壓縮后的報(bào)錯(cuò)信息得出未壓縮前的報(bào)錯(cuò)行列數(shù)和源碼文件    const originalInfo = consumer.originalPositionFor({ line: error.line, column: error.column })    // sourcesContent 中包含了各個(gè)文件的未壓縮前的源碼，根據(jù)文件名找出對(duì)應(yīng)的源碼    const originalFileContent = mapObj.sourcesContent[sources.indexOf(originalInfo.source)]    return {        file: originalInfo.source,        content: originalFileContent,        line: originalInfo.line,        column: originalInfo.column,        msg: error.msg,        error: error.error    }}
function format(item) {    return item.replace(/(\.\/)*/g, '')}
function getMapFileContent(url) {    return fs.readFileSync(path.resolve(__dirname, `./maps/${url.split('/').pop()}.map`), 'utf-8')}

bundle.jsbundle.js.map

Vue.config.errorHandler = (err, vm, info) => {    // 將報(bào)錯(cuò)信息打印到控制臺(tái)    console.error(err)
    lazyReportCache({        info,        error: err.stack,        subType: 'vue',        type: 'error',        startTime: performance.now(),        pageURL: getPageURL(),    })}

export default function pv() {    lazyReportCache({        type: 'behavior',        subType: 'pv',        startTime: performance.now(),        pageURL: getPageURL(),        referrer: document.referrer,        uuid: getUUID(),    })}

export default function pageAccessDuration() {    onBeforeunload(() => {        report({            type: 'behavior',            subType: 'page-access-duration',            startTime: performance.now(),            pageURL: getPageURL(),            uuid: getUUID(),        }, true)    })}

let timerlet startTime = 0let hasReport = falselet pageHeight = 0let scrollTop = 0let viewportHeight = 0
export default function pageAccessHeight() {    window.addEventListener('scroll', onScroll)
    onBeforeunload(() => {        const now = performance.now()        report({            startTime: now,            duration: now - startTime,            type: 'behavior',            subType: 'page-access-height',            pageURL: getPageURL(),            value: toPercent((scrollTop + viewportHeight) / pageHeight),            uuid: getUUID(),        }, true)    })
    // 頁(yè)面加載完成后初始化記錄當(dāng)前訪問(wèn)高度、時(shí)間    executeAfterLoad(() => {        startTime = performance.now()        pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight        scrollTop = document.documentElement.scrollTop || document.body.scrollTop        viewportHeight = window.innerHeight    })}
function onScroll() {    clearTimeout(timer)    const now = performance.now()
    if (!hasReport) {        hasReport = true        lazyReportCache({            startTime: now,            duration: now - startTime,            type: 'behavior',            subType: 'page-access-height',            pageURL: getPageURL(),            value: toPercent((scrollTop + viewportHeight) / pageHeight),            uuid: getUUID(),        })    }
    timer = setTimeout(() => {        hasReport = false        startTime = now        pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight        scrollTop = document.documentElement.scrollTop || document.body.scrollTop        viewportHeight = window.innerHeight            }, 500)}
function toPercent(val) {    if (val >= 1) return '100%'    return (val * 100).toFixed(2) + '%'}

export default function onClick() {    ['mousedown', 'touchstart'].forEach(eventType => {        let timer        window.addEventListener(eventType, event => {            clearTimeout(timer)            timer = setTimeout(() => {                const target = event.target                const { top, left } = target.getBoundingClientRect()
                lazyReportCache({                    top,                    left,                    eventType,                    pageHeight: document.documentElement.scrollHeight || document.body.scrollHeight,                    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,                    type: 'behavior',                    subType: 'click',                    target: target.tagName,                    paths: event.path?.map(item => item.tagName).filter(Boolean),                    startTime: event.timeStamp,                    pageURL: getPageURL(),                    outerHTML: target.outerHTML,                    innerHTML: target.innerHTML,                    width: target.offsetWidth,                    height: target.offsetHeight,                    viewport: {                        width: window.innerWidth,                        height: window.innerHeight,                    },                    uuid: getUUID(),                })            }, 500)        })    })}

export default function pageChange() {    let from = ''    window.addEventListener('popstate', () => {        const to = getPageURL()        lazyReportCache({            from,            to,            type: 'behavior',            subType: 'popstate',            startTime: performance.now(),            uuid: getUUID(),        })
        from = to    }, true)
    let oldURL = ''    window.addEventListener('hashchange', event => {        const newURL = event.newURL
        lazyReportCache({            from: oldURL,            to: newURL,            type: 'behavior',            subType: 'hashchange',            startTime: performance.now(),            uuid: getUUID(),        })
        oldURL = newURL    }, true)}

export default function onVueRouter(router) {    router.beforeEach((to, from, next) => {        // 首次加載頁(yè)面不用統(tǒng)計(jì)        if (!from.name) {            return next()        }
        const data = {            params: to.params,            query: to.query,        }
        lazyReportCache({            data,            name: to.name || to.path,            type: 'behavior',            subType: ['vue-router-change', 'pv'],            startTime: performance.now(),            from: from.fullPath,            to: to.fullPath,            uuid: getUUID(),        })
        next()    })}