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 326f760204119377bb2d0fd2e882765e91232204 Author: Qiuxia Fan <[email protected]> AuthorDate: Wed Aug 5 19:14:27 2020 +0800 style: format --- src/performance/fmp.ts | 359 ++++++++++++++++++++++++------------------------- 1 file changed, 177 insertions(+), 182 deletions(-) diff --git a/src/performance/fmp.ts b/src/performance/fmp.ts index 08e1bd1..8f5e8a9 100644 --- a/src/performance/fmp.ts +++ b/src/performance/fmp.ts @@ -40,14 +40,14 @@ const WH: number = window.innerHeight; const DELAY: number = 500; interface ICalScore { dpss: ICalScore[]; - st: number; - els: Els; - root?: Element; + st: number; + els: Els; + root?: Element; } type Els = Array<{ - $node: Element; - st: number; - weight: number; + $node: Element; + st: number; + weight: number; }>; class FMPTiming { @@ -100,112 +100,112 @@ class FMPTiming { } private calculateFinalScore() { if (MutationEvent && this.flag) { - if (this.checkNeedCancel(START_TIME)) { - this.observer.disconnect(); - this.flag = false; - const res = this.getTreeScore(document.body); - let tp: ICalScore = null; - res.dpss.forEach((item: any) => { - if (tp && tp.st) { - if (tp.st < item.st) { - tp = item; - } - } else { - tp = item; - } - }); - performance.getEntries().forEach((item: PerformanceResourceTiming) => { - this.entries[item.name] = item.responseEnd; - }); - if (!tp) { - if (this.fmpCallback) { - this.fmpCallback({ - tp: null, - resultEls: [], - fmpTiming: 0, - }); - } - return false; - } - const resultEls: Els = this.filterResult(tp.els); - const fmpTiming: number = this.getFmpTime(resultEls); - if (this.fmpCallback) { - this.fmpCallback({ - tp, - resultEls, - fmpTiming, - }); - } + if (this.checkNeedCancel(START_TIME)) { + this.observer.disconnect(); + this.flag = false; + const res = this.getTreeScore(document.body); + let tp: ICalScore = null; + res.dpss.forEach((item: any) => { + if (tp && tp.st) { + if (tp.st < item.st) { + tp = item; + } } else { - setTimeout(() => { - this.calculateFinalScore(); - }, DELAY); + tp = item; } - } + }); + performance.getEntries().forEach((item: PerformanceResourceTiming) => { + this.entries[item.name] = item.responseEnd; + }); + if (!tp) { + if (this.fmpCallback) { + this.fmpCallback({ + tp: null, + resultEls: [], + fmpTiming: 0, + }); + } + return false; + } + const resultEls: Els = this.filterResult(tp.els); + const fmpTiming: number = this.getFmpTime(resultEls); + if (this.fmpCallback) { + this.fmpCallback({ + tp, + resultEls, + fmpTiming, + }); + } + } else { + setTimeout(() => { + this.calculateFinalScore(); + }, DELAY); + } + } } private getFmpTime(resultEls: Els): number { - let rt = 0; - resultEls.forEach((item: any) => { - let time: number = 0; - if (item.weight === 1) { - const index: number = parseInt(item.$node.getAttribute('fmp_c'), 10); - time = this.statusCollector[index].time; - } else if (item.weight === 2) { - if (item.$node.tagName === 'IMG') { - time = this.entries[(item.$node as HTMLImageElement).src]; - } else if (item.$node.tagName === 'SVG') { - const index: number = parseInt(item.$node.getAttribute('fmp_c'), 10); - time = this.statusCollector[index].time; - } else { - const match = getStyle(item.$node, 'background-image').match(/url\(\"(.*?)\"\)/); - let url: string; - if (match && match[1]) { - url = match[1]; - } - if (url.indexOf('http') === -1) { - url = location.protocol + match[1]; - } - time = this.entries[url]; - } - } else if (item.weight === 4) { - if (item.$node.tagName === 'CANVAS') { - const index: number = parseInt(item.$node.getAttribute('fmp_c'), 10); - time = this.statusCollector[index].time; - } else if (item.$node.tagName === 'VIDEO') { - time = this.entries[(item.$node as HTMLVideoElement).src]; - if (!time) { - time = this.entries[(item.$node as HTMLVideoElement).poster]; - } - } + let rt = 0; + resultEls.forEach((item: any) => { + let time: number = 0; + if (item.weight === 1) { + const index: number = parseInt(item.$node.getAttribute('fmp_c'), 10); + time = this.statusCollector[index].time; + } else if (item.weight === 2) { + if (item.$node.tagName === 'IMG') { + time = this.entries[(item.$node as HTMLImageElement).src]; + } else if (item.$node.tagName === 'SVG') { + const index: number = parseInt(item.$node.getAttribute('fmp_c'), 10); + time = this.statusCollector[index].time; + } else { + const match = getStyle(item.$node, 'background-image').match(/url\(\"(.*?)\"\)/); + let url: string; + if (match && match[1]) { + url = match[1]; } - if (typeof time !== 'number') { - time = 0; + if (url.indexOf('http') === -1) { + url = location.protocol + match[1]; } - if (rt < time) { - rt = time; + time = this.entries[url]; + } + } else if (item.weight === 4) { + if (item.$node.tagName === 'CANVAS') { + const index: number = parseInt(item.$node.getAttribute('fmp_c'), 10); + time = this.statusCollector[index].time; + } else if (item.$node.tagName === 'VIDEO') { + time = this.entries[(item.$node as HTMLVideoElement).src]; + if (!time) { + time = this.entries[(item.$node as HTMLVideoElement).poster]; } - }); - return rt; + } + } + if (typeof time !== 'number') { + time = 0; + } + if (rt < time) { + rt = time; + } + }); + return rt; } private filterResult(els: Els): Els { - if (els.length === 1) { - return els; - } - let sum: number = 0; - els.forEach((item: any) => { - sum += item.st; - }); - const avg: number = sum / els.length; - return els.filter((item: any) => { - return item.st > avg; - }); + if (els.length === 1) { + return els; + } + let sum: number = 0; + els.forEach((item: any) => { + sum += item.st; + }); + const avg: number = sum / els.length; + return els.filter((item: any) => { + return item.st > avg; + }); } private checkNeedCancel(start: number): boolean { - const time: number = performance.now() - start; - const lastCalTime: number = this.statusCollector.length > 0 - ? this.statusCollector[this.statusCollector.length - 1].time - : 0; - return time > LIMIT || (time - lastCalTime > 1000); + const time: number = performance.now() - start; + const lastCalTime: number = this.statusCollector.length > 0 + ? this.statusCollector[this.statusCollector.length - 1].time + : 0; + return time > LIMIT || (time - lastCalTime > 1000); } private getTreeScore(node: Element): ICalScore | any { if (!node) { @@ -226,95 +226,90 @@ class FMPTiming { return this.calcaulteScore(node, dpss); } private calcaulteScore($node: Element, dpss: ICalScore[]): ICalScore { - const { - width, - height, - left, - top, - } = $node.getBoundingClientRect(); - let isInViewPort: boolean = true; - if (WH < top || WW < left) { - isInViewPort = false; - } - - let sdp: number = 0; + const { + width, + height, + left, + top, + } = $node.getBoundingClientRect(); + let isInViewPort: boolean = true; + if (WH < top || WW < left) { + isInViewPort = false; + } + let sdp: number = 0; + dpss.forEach((item: any) => { + sdp += item.st; + }); + let weight: number = Number(ELE_WEIGHT[$node.tagName as any]) || 1; + if (weight === 1 + && getStyle($node, 'background-image') + && getStyle($node, 'background-image') !== 'initial' + && getStyle($node, 'background-image') !== 'none') { + weight = ELE_WEIGHT.IMG; + } + let st: number = isInViewPort ? width * height * weight : 0; + let els = [{ $node, st, weight }]; + const root = $node; + const areaPercent = this.calculateAreaParent($node); + if (sdp > st * areaPercent || areaPercent === 0) { + st = sdp; + els = []; dpss.forEach((item: any) => { - sdp += item.st; + els = els.concat(item.els); }); - - let weight: number = Number(ELE_WEIGHT[$node.tagName as any]) || 1; - if (weight === 1 - && getStyle($node, 'background-image') - && getStyle($node, 'background-image') !== 'initial' - && getStyle($node, 'background-image') !== 'none') { - weight = ELE_WEIGHT.IMG; - } - let st: number = isInViewPort ? width * height * weight : 0; - let els = [{ $node, st, weight }]; - const root = $node; - const areaPercent = this.calculateAreaParent($node); - if (sdp > st * areaPercent || areaPercent === 0) { - st = sdp; - els = []; - dpss.forEach((item: any) => { - els = els.concat(item.els); - }); - } - return { - dpss, - st, - els, - root, - }; + } + return { + dpss, + st, + els, + root, + }; } private calculateAreaParent($node: Element): number { - const { - left, - right, - top, - bottom, - width, - height, - } = $node.getBoundingClientRect(); - - const winLeft: number = 0; - const winTop: number = 0; - const winRight: number = WW; - const winBottom: number = WH; + const { + left, + right, + top, + bottom, + width, + height, + } = $node.getBoundingClientRect(); + const winLeft: number = 0; + const winTop: number = 0; + const winRight: number = WW; + const winBottom: number = WH; + const overlapX = (right - left) + (winRight - winLeft) - (Math.max(right, winRight) - Math.min(left, winLeft)); + const overlapY = (bottom - top) + (winBottom - winTop) - (Math.max(bottom, winBottom) - Math.min(top, winTop)); - const overlapX = (right - left) + (winRight - winLeft) - (Math.max(right, winRight) - Math.min(left, winLeft)); - const overlapY = (bottom - top) + (winBottom - winTop) - (Math.max(bottom, winBottom) - Math.min(top, winTop)); - if (overlapX <= 0 || overlapY <= 0) { - return 0; - } - return (overlapX * overlapY) / (width * height); + if (overlapX <= 0 || overlapY <= 0) { + return 0; + } + return (overlapX * overlapY) / (width * height); } private setTag(target: Element, callbackCount: number): void { - const tagName: string = target.tagName; - if (IGNORE_TAG_SET.indexOf(tagName) === -1) { - const $children: HTMLCollection = target.children; - if ($children && $children.length > 0) { - for (let i = $children.length - 1; i >= 0; i--) { - const $child: Element = $children[i]; - const hasSetTag = $child.getAttribute('fmp_c') !== null; - if (!hasSetTag) { - const { - left, - top, - width, - height, - } = $child.getBoundingClientRect(); - if ( - WH < top || WW < left || width === 0 || height === 0 - ) { - continue; - } - $child.setAttribute('fmp_c', `${callbackCount}`); - } - this.setTag($child, callbackCount); - } - } + const tagName: string = target.tagName; + if (IGNORE_TAG_SET.indexOf(tagName) === -1) { + const $children: HTMLCollection = target.children; + if ($children && $children.length > 0) { + for (let i = $children.length - 1; i >= 0; i--) { + const $child: Element = $children[i]; + const hasSetTag = $child.getAttribute('fmp_c') !== null; + if (!hasSetTag) { + const { + left, + top, + width, + height, + } = $child.getBoundingClientRect(); + if (WH < top || WW < left || width === 0 || height === 0) { + continue; + } + $child.setAttribute('fmp_c', `${callbackCount}`); + } + this.setTag($child, callbackCount); + } } + } } }
