feat: add cls metrics

clouDr-f2e · Jul 13, 2021 · 7914d22 · 7914d22
1 parent e66ccc8
commit 7914d22
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 4 deletions.
diff --git a/examples/WebPerformance/index.css b/examples/WebPerformance/index.css
@@ -1,8 +1,20 @@
-img{
+img {
+  display: block;
   width: 400px;
 }
 
-.title{
+.title {
   font-size: 30px;
   font-weight: 600;
 }
+
+.move-box {
+  margin-bottom: 20px;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.move{
+  transform: translateY(30px);
+}
diff --git a/examples/WebPerformance/index.html b/examples/WebPerformance/index.html
@@ -8,11 +8,12 @@
 </head>
 <body>
 <div class="title">Performance example</div>
+<div class="move-box">Move</div>
 <img class="img1"
      src="data:image/jpeg;base64,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"
      alt="">
 <img class="img2"
-     src="https://wow.zamimg.com/uploads/screenshots/normal/873099-blingtron-7000.jpg"
+     src=""
      alt="">
 <img class="img3"
      src="http://5b0988e595225.cdn.sohucs.com/images/20180820/9736fbe2bb9342428ec0d9a7472b9a4f.jpeg"
@@ -45,6 +46,10 @@
     customPaintMetrics: 'custom-finish-paint'
   })
 
+  setTimeout(()=>{
+    document.querySelector('.img2').setAttribute('src','https://wow.zamimg.com/uploads/screenshots/normal/873099-blingtron-7000.jpg')
+  },1000)
+
   const mockRemote = () => new Promise(resolve => {
     setTimeout(resolve, 3000)
   })

diff --git a/packages/web-performance/README.md b/packages/web-performance/README.md
@@ -106,6 +106,11 @@ startTime|number|事件触发时间|
 delay|number|事件延迟时间|
 eventHandleTime|number|事件处理时间|
 
+### CLS
+字段|字段类型|描述|备注
+|---|---|----|---|
+value|number|页面元素意外位移量|
+
 ### FPS
 字段|字段类型|描述|备注
 |---|---|----|---|

diff --git a/packages/web-performance/src/index.ts b/packages/web-performance/src/index.ts
@@ -21,6 +21,7 @@ import { initFCP } from './metrics/getFCP'
 import { initFID } from './metrics/getFID'
 import { initLCP } from './metrics/getLCP'
 import { initFPS } from './metrics/getFPS'
+import { initCLS } from './metrics/getCLS'
 import { initResourceFlow } from './metrics/getResourceFlow'
 
 let metricsStore: MetricsStore
@@ -41,6 +42,7 @@ class WebVitals implements IWebVitals {
     initNetworkInfo(metricsStore, reporter, immediately)
     initDeviceInfo(metricsStore, reporter, immediately)
     initResourceFlow(metricsStore, reporter, customPaintMetrics, immediately)
+    initCLS(metricsStore, reporter, customPaintMetrics, immediately)
 
     afterLoad(() => {
       initNavigationTiming(metricsStore, reporter, immediately)
@@ -92,7 +94,7 @@ class WebVitals implements IWebVitals {
       metricsStore.set(`${markName}Metrics`, metrics)
     } else {
       const value = getMark(`${markName}_end`)?.startTime
-      this.clearMark(`${markName}_end`)
+      this.clearMark(markName)
 
       const metrics = { name: `${markName}Metrics`, value }
       reporter(metrics)

diff --git a/packages/web-performance/src/metrics/getCLS.ts b/packages/web-performance/src/metrics/getCLS.ts
@@ -7,3 +7,57 @@
  * but in the instant before your finger lands—BOOM—the link moves,
  * and you end up clicking something else!
  * */
+import { isPerformanceObserverSupported } from '../utils/isSupported'
+import observe from '../lib/observe'
+import metricsStore from '../lib/store'
+import { IReportHandler, LayoutShift, IMetrics } from '../types'
+import { metricsName } from '../constants'
+import { roundByFour } from '../utils'
+
+const getCLS = (cls): PerformanceObserver | undefined => {
+  if (!isPerformanceObserverSupported()) {
+    console.warn('browser do not support performanceObserver')
+    return
+  }
+
+  const entryHandler = (entry: LayoutShift) => {
+    if (!entry.hadRecentInput) {
+      cls.value += entry.value
+    }
+  }
+
+  return observe('layout-shift', entryHandler)
+}
+
+/**
+ * @param {metricsStore} store
+ * @param {Function} report
+ * @param {string} customCompleteEvent
+ * @param {boolean} immediately, if immediately is true,data will report immediately
+ * */
+export const initCLS = (store: metricsStore, report: IReportHandler, customCompleteEvent: string, immediately = true): void => {
+  const cls = { value: 0 }
+
+  const po = getCLS(cls)
+
+  const completeEvent = customCompleteEvent || 'pageshow'
+
+  const stopListening = () => {
+    po.takeRecords().map((entry: LayoutShift) => {
+      if (!entry.hadRecentInput) {
+        cls.value += entry.value
+      }
+    })
+    po.disconnect()
+
+    const metrics = { name: metricsName.CLS, value: roundByFour(cls.value) } as IMetrics
+
+    if (immediately) {
+      report(metrics)
+    }
+
+    store.set(metricsName.RL, metrics)
+  }
+
+  addEventListener(completeEvent, stopListening, { once: true, capture: true })
+}
diff --git a/packages/web-performance/src/types/index.ts b/packages/web-performance/src/types/index.ts
@@ -97,3 +97,8 @@ export interface IReportData {
 export interface IMetricsObj {
   [prop: string]: IMetrics
 }
+
+export interface LayoutShift extends PerformanceEntry {
+  value: number
+  hadRecentInput: boolean
+}