前端性能分析小结

浏览器的前端性能火过大概半年,然后就基本消失了,而在APP端的也有过一个类似的周期,那么为什么还要谈这个话题呢?

知其然知其所以然,任何东西都有个优化演进的过程,不能因为其已经优化好了就不去了解。

当前前端性能测试的降级和前端架构的成熟有很大关系:

  1. 首先前端优化的第一部分关于请求个数和请求大小的优化被CDN解决了。原本为了解决服务器静态资源的性能问题,我们需要对HTML、CSS、JS、Image这类静态资源进行请求合并,内容压缩,甚至资源复用,从而降低其对带宽、服务器IO以及连接池的依赖。

  2. 其次前端优化中的渲染性能在客户端高性能及引擎的共同努力下极大的优化了。在PC机几乎性能过剩的情况下,几乎不需要对低配用户进行兼容,而手机端也随着整体的大规模升级快速越过,在当前的引擎和终端性能下出现前端性能问题的情况大大减少。

  3. 最后当前前端框架的成熟(Vue、React、AngularJS等),很少出现由于JS本身的机制问题导致的性能问题,通过异步和片段式操作避免了卡段等影响用户操作体验的情况。

那么在这些情况下,掌握浏览器及前端工作原理,部分前端代码编写方式,常用跟踪工具,可以很好的帮助我们看透问题。所以在这次的课程中我通过一个简单的循环算法来让大家感受到不同浏览器上的由于引擎导致的性能差异,在Chrome中如何通过console命令来获取事务时间,如何通过F12来看到执行过程,进一步通过DynatraceAjax来获取更细节的执行计划。通过这样的套路帮助大家树立在前端中可能遇到的性能问题:

  1. 网络状态,评估带宽影响

  2. 慢请求的服务端时间,评估是否是后端性能问题

  3. 组成页面的所有请求,评估是否是加载对象太多的串行导致了总时间较长

  4. 是否存在js阻塞类的情况,评估在客户端上是否存在不合理的JS执行逻辑

推荐参考文章:

https://blog.csdn.net/he90227/article/details/49247209

前端性能分析课程回看:

https://ke.qq.com/course/249690

PS:TestOps性能测试专项即将开班!

课程详细参考https://ke.qq.com/course/268152

TestOps|测试运维全生命周期推动质量
(0)

相关推荐

  • 基于 Flutter 的 Web 渲染引擎「北海」正式开源

    今天 以下文章来源于淘系前端团队 ,作者淘系-染陌 淘系前端团队前端的世界一直在变化着,在各种熟悉的语言进化中迅速的化学反应.也许你和我们一样,对前端的理解也在不断刷新.欢迎你和我们一起,在淘宝这个丰 ...

  • 从淘宝首页登录说起

    这是 Jerry 2021 年的第 50 篇文章,也是汪子熙公众号总共第 327 篇原创文章. 今天文章提到的场景,理论上本公众号每一位粉丝,都可以在自己的电脑上进行操作.因为涉及到的应用,几乎每一个 ...

  • [周汇总] 前端面试每日3+1(周汇总2019.06.30)

    <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受! 相信 坚 ...

  • 字节跳动最爱考的前端面试题:Node.js 基础

    前端技术优选 今天 前几天,跟我一朋友聊天,他现在是阿里的架构师,说:「他们根本不知道,现在的电商大促有多么依赖 Node.js.」 说真的,我倒并不意外.作为一个定位明确的高性能 Web 服务器,N ...

  • 前端性能分析探索-天眼浏览器监控

    一.概述 天眼是中国联通IT生产运营支撑平台,对生产运营领域提供端到端.云化架构全层级的运维工具支撑.天眼融合人工智能与大数据技术,实现传统运维向自动化生产.智慧化运营的转变,保障4亿级用户规模系统稳 ...

  • 中低温焊接容器板SA612M性能分析

    SA612M是一种中低温焊接压力容器用镇静C-Mn-Si钢板 其主要技术条件如下 一.适用范围 本技术协议适用于最大厚度25mm的中低温焊接压力容器用镇静C-Mn-Si钢板的生产及检验. 二.SA61 ...

  • 美标中、低温压力容器用钢板SA516Gr70性能分析

    美标中、低温压力容器用钢板SA516Gr70性能分析

  • 着陆性能分析工作及要求汇总!

    本文综合了两篇写于2005年的国内<着陆性能分析工作调研报告>和国外考察报告.关于机组在到达时空中着陆距离评估工作,民航局飞标司在2009年12月下发的<航空承运人湿跑道和污染跑道运 ...

  • S460N熔炼分析S460N-20°C冲击成分性能分析

    S460N钢板化学成分熔炼分析牌号CSiMnPSNiCr≤0.2≤0.61~1.7≤0.03≤0.025≤0.8≤0.3S460NMoCuNbVTiAltN≤0.1≤0.55≤0.05≤0.2≤0.0 ...

  • 20MnMo技术标准20MnMo成分性能分析

    20MnMo属于低合金压力容器用锻钢件,执行GB/T17017标准.主要用于制造-40℃~470℃的压力容器构件.重要锻件等. 含碳量为0.2%,Mn和MO含量都小于1.5%,该种锻件的化学成分主要有 ...

  • 经验交流▏G-882G 型海洋磁力仪在海洋工程勘察中的性能分析与应用

    伴随国家海洋发展战略的实施发展,海洋磁力仪的应用更加广泛,根据实际应用情况来看,常见的海洋磁力仪类型主要是质子磁力仪和光泵磁力仪,都是电子仪器的一种.结合不同的作业施工条件需要选择不同型号的海洋磁力仪 ...

  • 美国ASME铬钼合金钢SA387Gr9性能分析

    美国ASME铬钼合金钢SA387Gr9性能分析

  • 超全整理!Linux 性能分析工具汇总

    出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识, ...