【ky开元棋盘网址】
前端性能优化笔记之首屏时光收集指标的具体编制
发布日期:2022-08-06 22:53    点击次数:178

本文转载自微信群众号「前端万有引力」,作者一川。转载本文请联络前端万有引力群众号。

1写在前面

平日,我们在开发情形及第行首屏时光测试,是经由过程在内网中经由过程Chrome DevTools窥察首屏时光,这样内外收集情形存在差异,导致测量的首屏时光也会有所差异。我们在开发中应用的是调试器材,而用户是间接拜访的,两者的拜访模式是差异的。窥察首屏时光的动作举措有多种,而其实的用户人群差异,移动动作举措的型号和所处收集情形也是各其他。

那末,怎么样相识用户的首屏时光呢?大量用户的首屏时光漫衍又是怎么样的呢?性能差的用户首屏时光又是几多呢?

2手动收集举措及优弱点

所谓手动收集,普通就是经由过程埋点的编制举行收集上报,如:我们要收集今后页面的用户停立地候,就必须收集到关上页面的时光和敞开或潜匿页面的时光,再举行计算失去停立地候并上报。

假定是电商列表页面,瀑布流型的页面,需要痛处各个机型的首屏职位地方,估算出一个匀称的首屏职位地方,尔后举行经管上报。

手动收集的兼容性强,可以或许随着情形而举行更动,其次可以或许去左右化,各个业务模块零丁担当自身的经管代码,有成就时业务顺序员去排盘考题即可。然则手动收集也存在一些成就,苟且与业务代码重大耦合,它的笼盖率无余,业务顺序员一旦忙起来,性能优化规划的实行就会耽误排后。

3自动化收集的举措及所长

自动化收集,即引入一段通用的代码来做首屏时光自动化收集,引入进程中,除了须要的设置外不需要做其他事变。独立性强,接入进程更为自动化,可以或许由一个民众团队来开发,试点后举行推行到各个业务团队。然则,有些共性化需要是没法失去餍足的,因为在事变中总会遇到一些不凡业务场景,会遇到难以实行自动化收集的情形。

4服务端模板业务下的收集规划

有人会说今朝的前端开发不都是给与web框架举行开发吗,为啥还会奔忙及到服务器模板呢。那是因为在一些B端业务的公司用的照旧服务端模板,如Velocity、Smarty等,比喻说微前端框架SSR也是用的服务端模板。

之所以会出现这类情形,这是因为后审察比重、前端偏共同,出于效劳推敲先后端并无举行解耦。这时候光假定应用今朝流行的web前端框架vue/react,这无疑就会添加深造成本。

应用阅读器供应的DOMContentLoaded接口来收集首屏时光点,具体的思路是:当页面中的HTML元素被加载和剖析实现后,DOMContentLoaded事宜会被触发,首屏时光=DOMContentLoaded时光=DOMContentLoadedEventEnd-fetchStart时光。

固然这类收集编制不克不迭用于SPA单页面应用业务场景,这是因为在应用Performance API接口收集的首屏时光兴许是1106ms。而理论首屏时光兴许就是1976ms。在SPA单页面中,用户要求一个页面时,页面会先加载index.html,企业动态加载实现后就会触发DOMContentLoaded和load。页面会相干脚本资源并经由过程axios异步要求数据,应用数据衬着页面主题部份,这个时光首屏才衬实在现。SPA的流行让Performance API接口落空了正本的意思,那末,这类情形下该当怎么样收集首屏指标呢?

固然,我们的经管规划是给与MutationObeserver收集首屏时光。

5单页面SPA应用业务场景下的收集编制

假定一个首屏页面的内容没有被组件化,那末首屏时光就没法被统计到,除非各个业务都拟订一套组件标准,首屏内容必须封装成组件。前面也晓得onload的时光也并不是终究时光,兴许在onlaod阶段,首屏还没加载完。其次,没有推敲到首屏是张图片的情形,首屏诚然加载实现了,然则图片是异步的,图片并无举行加载。

我们想假定兴许在首屏衬着进程中,把各个资源的加载时光记载到日志中,后续再经由过程阐发,肯定某个资源加载完的时光,那末就是首屏时光。

MutationObeserver接笔供应了监视对DOM树所做改观的才能,它被策画为旧的MutationEvents功用的改换品,该功用是DOM3 Events标准的一部份。

当用户进入页面时,我们可应用MutationObeserver监控DOM元素,当DOM元素发生变换时,顺序会标记变换的元素,记载时光点和分数,储存在数组中。首屏指标收集到某些条件时,首屏衬着已经截至了,我们需要推敲到首屏收集截至的条件。

递归遍历DOM元素及其子元素,痛处子元素所在层级设定元素权重,比喻:页面DOM元素的第一层设置为1,当其被衬着时得分为1,每添加一个元素层级权重添加0.5,当第五层级元素的权重就为3.5,衬着时给出对应分数。痛处前面统计到的元素层级得分,计算元素的分数变换率,取得变换率最大点对应的分数,尔后找到该分数对应的时光,即为首屏时光。

function CScor(el, tiers, parentScore){   let score = 0;   const tagName = el.tagName;   // 鉴定今后的标签元素是否为指定的标签元素   if(!filterTagNameInTagNames(tagName)){     const childrenLen = el.children ? el.children.length : 0;     // 判读子元素的长度是否大于0     if(childrenLen>0){       for(let childs = el.children, len = childrenLen-1; len >= 0; len--){         score += calculateScore(childs[len],tiers+1,score>0)       }     }     // 鉴定分数是否小于等于0,且父元素的分数为0     if(score<= 0&& !parentScore){       if(!(el.getBoundingClintRect&& el.getBoundingClintRect().top<WH)) return 0     }     score += 1 + 0.5 * tiers;   }   return score }  function filterTagNameInTagNames(tagName){   return ["SCRIPT","STYLE","META","HEAD"].some(tag=>tag===tagName) }  calFinalScore(){   try {     if(this.sendMark) return;     const time = Date.now() - window.performance.timing.fetchStart;     let isCheckFMP = time > 30000 


上一篇:Firefox 96正式宣布:大大升高资源占用
下一篇:做人,服膺三字,终身顺遂