- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章前端性能优化笔记之首屏时间采集指标的具体方法由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
通常,我们在开发环境中进行首屏时间测试,是通过在内网中通过Chrome DevTools观察首屏时间,这样内外网络环境存在差异,导致测量的首屏时间也会有所不同。我们在开发中使用的是调试工具,而用户是直接访问的,两者的访问形式是不同的。观察首屏时间的设备有多种,而真实的用户人群不同,移动设备的型号和所处网络环境也是各异的.
那么,如何了解用户的首屏时间呢?大量用户的首屏时间分布又是怎样的呢?性能差的用户首屏时间又是多少呢?
所谓手动采集,一般就是通过埋点的方式进行采集上报,如:我们要收集当前页面的用户停留时间,就必须采集到打开页面的时间和关闭或隐藏页面的时间,再进行计算得到停留时间并上报.
如果是电商列表页面,瀑布流型的页面,需要根据各个机型的首屏位置,估算出一个平均的首屏位置,然后进行打点上报.
手动采集的兼容性强,可以随着情况而进行变动,其次可以去中心化,各个业务模块单独负责自己的打点代码,有问题时业务程序员去排查问题即可。但是手动采集也存在一些问题,容易与业务代码严重耦合,它的覆盖率不足,业务程序员一旦忙起来,性能优化方案的实施就会延迟排后.
自动化采集,即引入一段通用的代码来做首屏时间自动化采集,引入过程中,除了必要的配置外不需要做其他事情。独立性强,接入过程更加自动化,可以由一个公共团队来开发,试点后进行推广到各个业务团队。但是,有些个性化需求是无法得到满足的,因为在工作中总会遇到一些特殊业务场景,会遇到难以实施自动化采集的情况.
有人会说现在的前端开发不都是采用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采集首屏时间.
如果一个首屏页面的内容没有被组件化,那么首屏时间就无法被统计到,除非各个业务都制定一套组件标准,首屏内容必须封装成组件。前面也知道onload的时间也并非最终时间,可能在onlaod阶段,首屏还没加载完。其次,没有考虑到首屏是张图片的情况,首屏虽然加载完成了,但是图片是异步的,图片并没有进行加载.
我们想如果能够在首屏渲染过程中,把各个资源的加载时间记录到日志中,后续再通过分析,确定某个资源加载完的时间,那么就是首屏时间.
MutationObeserver接口提供了监督对DOM树所做更改的能力,它被设计为旧的MutationEvents功能的替代品,该功能是DOM3 Events规范的一部分.
当用户进入页面时,我们可以使用MutationObeserver监控DOM元素,当DOM元素发生变化时,程序会标记变化的元素,记录时间点和分数,储存在数组中。首屏指标采集到某些条件时,首屏渲染已经结束了,我们需要考虑到首屏采集终止的条件.
递归遍历DOM元素及其子元素,根据子元素所在层级设定元素权重,比如:页面DOM元素的第一层设置为1,当其被渲染时得分为1,每增加一个元素层级权重增加0.5,当第五层级元素的权重就为3.5,渲染时给出对应分数。根据前面统计到的元素层级得分,计算元素的分数变化率,获取变化率最大点对应的分数,然后找到该分数对应的时间,即为首屏时间.
如果页面里包括图片,使用上面的首屏指标采集方案,结果准确吗?答案是不准确的。上述的计算逻辑主要针对的是DOM元素而做的,图片加载过程是异步,图片容器(图片的DOM元素)和内容的加载是分开的,当容器加载出来时,内容还没出来,一定要确保内容加载出来,才算是首屏.
进行个归纳,通常计算首屏时间的方法有:
首屏模块标签标记法 。
在首屏模块标签标记法中,首屏时间等于firstScreen - performance.timing.navigationStart;。但是在实际业务中,能够使用首屏模块标签标记法的情况比较少,大多数页面都需要通过接口拉取数据才能完整展示,因此我们会使用JavaScript 脚本来判断首屏页面内容加载情况.
统计首屏内图片完成加载的时间 。
在实际进行首屏加载中,加载最慢的资源文件是图片,对此我们可以将加载最慢的图片文件的时间作为首屏时间。这是因为在浏览器发起HTTP请求,在页面中建立TCP连接,但是每个页面所能建立的连接数又是有限的,使得并不能一次性将所有的图片都能进行下载和展示.
基于此种情况,我们可以在页面DOM树构建完成后去遍历首屏内所有的图片标签,并对每个图片标签的onload事件进行监听,从而计算得到所有图片中加载时间的最大值。这样就得到首屏时间=加载最慢的图片的时间点 - performance.timing.navigationStart.
自定义模块内容计算法 。
由于在统计首屏内遍历图片标签列表得到最大加载时间比较复杂,对此在业务中可以通过自定义模块内容,来简化计算首屏时间。如下面的做法:
忽略图片等资源加载情况,只考虑页面主要DOM 。
只考虑首屏的主要模块,而不是严格意义首屏线以上的所有内容 。
《前端性能优化方法与实践》 。
《前端优化-如何计算白屏和首屏时间》 。
本文主要介绍了首屏指标采集相关的内容,这种性能采集方案靠谱吗?当前的互联网大厂又在使用什么采集方案呢?就目前而言,上面介绍的是当前应用的最好的首屏指标采集方案,兼容了单页面应用和服务端模板的页面.
原文链接:https://mp.weixin.qq.com/s/6bf8kgzCt3akAiZJYiAFNw 。
最后此篇关于前端性能优化笔记之首屏时间采集指标的具体方法的文章就讲到这里了,如果你想了解更多关于前端性能优化笔记之首屏时间采集指标的具体方法的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
比较代码: const char x = 'a'; std::cout > (0C310B0h) 00C3100B add esp,4 和 const i
您好,我正在使用 Matlab 优化求解器,但程序有问题。我收到此消息 fmincon 已停止,因为目标函数值小于目标函数限制的默认值,并且约束满足在约束容差的默认值范围内。我也收到以下消息。警告:矩
处理Visual Studio optimizations的问题为我节省了大量启动和使用它的时间 当我必须进行 J2EE 开发时,我很难回到 Eclipse。因此,我还想知道人们是否有任何提示或技巧可
情况如下:在我的 Excel 工作表中,有一列包含 1-name 形式的条目。考虑到数字也可以是两位数,我想删除这些数字。这本身不是问题,我让它工作了,只是性能太糟糕了。现在我的程序每个单元格输入大约
这样做有什么区别吗: $(".topHorzNavLink").click(function() { var theHoverContainer = $("#hoverContainer");
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the cost of '$(this)'? 我经常在一些开发人员代码中看到$(this)引用同一个
我刚刚结束了一个大型开发项目。我们的时间紧迫,因此很多优化被“推迟”。既然我们已经达到了最后期限,我们将回去尝试优化事情。 我的问题是:优化 jQuery 网站时您要寻找的最重要的东西是什么。或者,我
所以我一直在用 JavaScript 编写游戏(不是网络游戏,而是使用 JavaScript 恰好是脚本语言的游戏引擎)。不幸的是,游戏引擎的 JavaScript 引擎是 SpiderMonkey
这是我在正在构建的页面中使用的 SQL 查询。它目前运行大约 8 秒并返回 12000 条记录,这是正确的,但我想知道您是否可以就如何使其更快提出可能的建议? SELECT DISTINCT Adve
如何优化这个? SELECT e.attr_id, e.sku, a.value FROM product_attr AS e, product_attr_text AS a WHERE e.attr
我正在使用这样的结构来测试是否按下了所需的键: def eventFilter(self, tableView, event): if event.type() == QtCore.QEven
我正在使用 JavaScript 从给定的球员列表中计算出羽毛球 double 比赛的所有组合。每个玩家都与其他人组队。 EG。如果我有以下球员a、b、c、d。它们的组合可以是: a & b V c
我似乎无法弄清楚如何让这个 JS 工作。 scroll function 起作用但不能隐藏。还有没有办法用更少的代码行来做到这一点?我希望 .down-arrow 在 50px 之后 fade out
我的问题是关于用于生产的高级优化级联样式表 (CSS) 文件。 多么最新和最完整(准备在实时元素中使用)的 css 优化器/最小化器,它们不仅提供删除空格和换行符,还提供高级功能,如删除过多的属性、合
我读过这个: 浏览器检索在 中请求的所有资源开始呈现 之前的 HTML 部分.如果您将请求放在 中section 而不是,那么页面呈现和下载资源可以并行发生。您应该从 移动尽可能多的资源请求。
我正在处理一些现有的 C++ 代码,这些代码看起来写得不好,而且调用频率很高。我想知道我是否应该花时间更改它,或者编译器是否已经在优化问题。 我正在使用 Visual Studio 2008。 这是一
我正在尝试使用 OpenGL 渲染 3 个四边形(1 个背景图,2 个 Sprite )。我有以下代码: void GLRenderer::onDrawObjects(long p_dt) {
我确实有以下声明: isEnabled = false; if(foo(arg) && isEnabled) { .... } public boolean foo(arg) { some re
(一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录。微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引、簇集索引)和非聚集索引(no
一、写在前面 css的优化方案,之前没有提及,所以接下来进行总结一下。 二、具体优化方案 2.1、加载性能 1、css压缩:将写好的css进行打包,可以减少很多的体积。 2、css单一样式:在需要下边
我是一名优秀的程序员,十分优秀!