perf(ccp): 优化ccp上报时机，fp、fcp、lcp从onload事件中移除

clouDr-f2e · Dec 8, 2021 · d826f21 · d826f21
1 parent 4d09e3a
commit d826f21
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/web-performance/src/index.ts b/packages/web-performance/src/index.ts
@@ -42,7 +42,8 @@ class WebVitals implements IWebVitals {
       logFpsCount = 5,
       apiConfig = {},
       hashHistory = true,
-      excludeRemotePath = []
+      excludeRemotePath = [],
+      maxWaitCCPDuration = 30 * 1000
     } = config
 
     this.immediately = immediately
@@ -55,14 +56,14 @@ class WebVitals implements IWebVitals {
     initNetworkInfo(metricsStore, reporter, immediately)
     initDeviceInfo(metricsStore, reporter, immediately)
     initCLS(metricsStore, reporter, immediately)
-    initCCP(metricsStore, reporter, needCCP, apiConfig, hashHistory, excludeRemotePath, immediately)
+    initCCP(metricsStore, reporter, needCCP, apiConfig, hashHistory, excludeRemotePath, maxWaitCCPDuration, immediately)
+    initFP(metricsStore, reporter, immediately)
+    initFCP(metricsStore, reporter, immediately)
+    initLCP(metricsStore, reporter, immediately)
 
     afterLoad(() => {
       initNavigationTiming(metricsStore, reporter, immediately)
-      initFP(metricsStore, reporter, immediately)
-      initFCP(metricsStore, reporter, immediately)
       initFID(metricsStore, reporter, immediately)
-      initLCP(metricsStore, reporter, immediately)
       initFPS(metricsStore, reporter, logFpsCount, immediately)
     })
 

diff --git a/packages/web-performance/src/metrics/getCCP.ts b/packages/web-performance/src/metrics/getCCP.ts
@@ -14,6 +14,7 @@ import { isPerformanceSupported } from '../utils/isSupported'
 import { metricsName } from '../constants'
 import { onHidden } from '../lib/onHidden'
 import { onPageChange } from '../lib/onPageChange'
+import getFirstHiddenTime from '../lib/getFirstHiddenTime'
 
 const remoteQueue = {
   hasStoreMetrics: false,
@@ -24,8 +25,10 @@ let isDone = false
 let reportLock = true
 
 const storeMetrics = (name, value, store) => {
-  const metrics = { name, value }
-  store.set(name, metrics)
+  if (value < getFirstHiddenTime().timeStamp) {
+    const metrics = { name, value }
+    store.set(name, metrics)
+  }
 }
 
 const computeCCPAndRL = (store) => {
@@ -140,8 +143,8 @@ const reportMetrics = (store: metricsStore, report, immediately) => {
   }
 }
 
-const maxWaitTime4Report = (cb: () => void) => {
-  setTimeout(cb, 30 * 1000)
+const maxWaitTime4Report = (cb: () => void, maxWaitCCPDuration) => {
+  setTimeout(cb, maxWaitCCPDuration)
 }
 
 export const initCCP = (
@@ -151,6 +154,7 @@ export const initCCP = (
   apiConfig: { [prop: string]: Array<string> },
   hashHistory: boolean,
   excludeRemotePath: Array<string>,
+  maxWaitCCPDuration: number,
   immediately: boolean
 ) => {
   const event = needCCP ? 'custom-contentful-paint' : 'pageshow'
@@ -172,7 +176,7 @@ export const initCCP = (
 
   onPageChange(() => reportMetrics(store, report, immediately))
 
-  maxWaitTime4Report(() => reportMetrics(store, report, immediately))
+  maxWaitTime4Report(() => reportMetrics(store, report, immediately), maxWaitCCPDuration)
 
   proxyXhr(
     (url) => beforeHandler(url, apiConfig, needCCP, hashHistory, excludeRemotePath),

diff --git a/packages/web-performance/src/types/index.ts b/packages/web-performance/src/types/index.ts
@@ -10,6 +10,7 @@ export interface IConfig {
   }
   hashHistory?: boolean
   excludeRemotePath?: Array<string>
+  maxWaitCCPDuration: number
 }
 
 export interface IPerformanceNavigationTiming {