前端性能分析小结
浏览器的前端性能火过大概半年,然后就基本消失了,而在APP端的也有过一个类似的周期,那么为什么还要谈这个话题呢?
知其然知其所以然,任何东西都有个优化演进的过程,不能因为其已经优化好了就不去了解。
当前前端性能测试的降级和前端架构的成熟有很大关系:
首先前端优化的第一部分关于请求个数和请求大小的优化被CDN解决了。原本为了解决服务器静态资源的性能问题,我们需要对HTML、CSS、JS、Image这类静态资源进行请求合并,内容压缩,甚至资源复用,从而降低其对带宽、服务器IO以及连接池的依赖。
其次前端优化中的渲染性能在客户端高性能及引擎的共同努力下极大的优化了。在PC机几乎性能过剩的情况下,几乎不需要对低配用户进行兼容,而手机端也随着整体的大规模升级快速越过,在当前的引擎和终端性能下出现前端性能问题的情况大大减少。
最后当前前端框架的成熟(Vue、React、AngularJS等),很少出现由于JS本身的机制问题导致的性能问题,通过异步和片段式操作避免了卡段等影响用户操作体验的情况。
那么在这些情况下,掌握浏览器及前端工作原理,部分前端代码编写方式,常用跟踪工具,可以很好的帮助我们看透问题。所以在这次的课程中我通过一个简单的循环算法来让大家感受到不同浏览器上的由于引擎导致的性能差异,在Chrome中如何通过console命令来获取事务时间,如何通过F12来看到执行过程,进一步通过DynatraceAjax来获取更细节的执行计划。通过这样的套路帮助大家树立在前端中可能遇到的性能问题:
网络状态,评估带宽影响
慢请求的服务端时间,评估是否是后端性能问题
组成页面的所有请求,评估是否是加载对象太多的串行导致了总时间较长
是否存在js阻塞类的情况,评估在客户端上是否存在不合理的JS执行逻辑
推荐参考文章:
https://blog.csdn.net/he90227/article/details/49247209
前端性能分析课程回看:
https://ke.qq.com/course/249690
PS:TestOps性能测试专项即将开班!
课程详细参考https://ke.qq.com/course/268152