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 <[email protected]> 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; }
