[skywalking-client-js] 46/48: style: add comments

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-client-js.git

commit 201949325a1118b8716bb9bc90c65548f1486d2a
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Mon Aug 10 16:59:58 2020 +0800

    style: add comments
---
 src/monitor.ts         |  5 ++---
 src/performance/fmp.ts | 11 +++++++++++
 src/types.d.ts         |  1 -
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/monitor.ts b/src/monitor.ts
index 9c2d762..025dc76 100644
--- a/src/monitor.ts
+++ b/src/monitor.ts
@@ -24,9 +24,8 @@ const ClientMonitor = {
     jsErrors: true,
     apiErrors: true, // ajax promise
     resourceErrors: true,
-    autoTracePerf: true,
-    traceResource: false,
-    useFmp: false,
+    autoTracePerf: true, // trace performance detail
+    useFmp: false, // use first meaningful paint
   } as CustomOptionsType,
 
   register(options: CustomOptionsType) {
diff --git a/src/performance/fmp.ts b/src/performance/fmp.ts
index 9146a50..0b13093 100644
--- a/src/performance/fmp.ts
+++ b/src/performance/fmp.ts
@@ -109,6 +109,7 @@ class FMPTiming {
             tp = item;
           }
         }
+        // Get all of soures load time
         performance.getEntries().forEach((item: PerformanceResourceTiming) => {
           this.entries[item.name] = item.responseEnd;
         });
@@ -169,6 +170,10 @@ class FMPTiming {
     });
     return rt;
   }
+  /**
+   * The nodes with the highest score in the visible area are collected and the average value is taken,
+   * and the low score ones are eliminated
+   */
   private filterResult(els: Els): Els {
     if (els.length === 1) {
       return els;
@@ -196,6 +201,7 @@ class FMPTiming {
     const dpss = [];
     const children: any = node.children;
     for (const child of children) {
+      // Only calculate marked elements
       if (!child.getAttribute('fmp_c')) {
         continue;
       }
@@ -223,16 +229,20 @@ class FMPTiming {
       sdp += item.st;
     });
     let weight: number = Number(ELE_WEIGHT[$node.tagName as any]) || 1;
+    // If there is a common element of the background image, it is calculated according to the picture
     if (weight === 1
       && getStyle($node, 'background-image')
       && getStyle($node, 'background-image') !== 'initial'
       && getStyle($node, 'background-image') !== 'none') {
       weight = ELE_WEIGHT.IMG;
     }
+    // score = the area of element
     let st: number = isInViewPort ? width * height * weight : 0;
     let els = [{ $node, st, weight }];
     const root = $node;
+    // The percentage of the current element in the viewport
     const areaPercent = this.calculateAreaParent($node);
+    // If the sum of the child's weights is greater than the parent's true weight
     if (sdp > st * areaPercent || areaPercent === 0) {
       st = sdp;
       els = [];
@@ -277,6 +287,7 @@ class FMPTiming {
         for (let i = $children.length - 1; i >= 0; i--) {
           const $child: Element = $children[i];
           const hasSetTag = $child.getAttribute('fmp_c') !== null;
+          // If it is not marked, whether the marking condition is met is detected
           if (!hasSetTag) {
             const {
               left,
diff --git a/src/types.d.ts b/src/types.d.ts
index d4083b2..71271fb 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -25,6 +25,5 @@ export interface CustomOptionsType {
   apiErrors: boolean;
   resourceErrors: boolean;
   autoTracePerf: boolean;
-  traceResource: boolean;
   useFmp: boolean;
 }