前端测试 关于 Auditing Performance

程明远 · 2019年03月15日 · 最后由 思寒_seveniruby 回复于 2019年03月17日 · 293 次阅读

关于这篇文章

最近作者一直在研究前端,算下来也有4个月左右了。正好前两天在知乎和掘金上看到不少关于前端性能测试的文章,然后自己上手体验了不少工具以及网站。个人感觉在前端测试方面不论是在前端还是测试方面都算是了解的同学不算太多。所以想写出来算是小科普一下吧。文笔不算太好,如果哪里讲的不对还望大家指出

Auditing Performance

其实现在的前端领域可以说是发展的相当迅猛,大部分同学多多少少都了解一点,例如三大框架(react,vue,ng),我也在社区里看过不少同学用element + vue 和 antd + react的方案做出了自己的平台,但是前端的未来绝对不会仅仅停留在SPA(Single Page Application),未来在移动端(RN,PWA),PC端(Electron),甚至是不久后5g出世所带来的物联网技术,都是可能存在前端的一席之地的。那么前端的性能问题也迟早会被提上议程,在社区的霍格沃兹学院的课程中,也有提到关于前端的性能分析,H5性能分析的章节。但是随着我这几天的研究发现,我们可以使用的工具其实有很多。

Chrome auditis or LightHouse

LightHouse之前是作为Chrome的插件形式存在的,大家可以在Chrome Extension store中搜索并添加至你的浏览器,使用的方法很简单,只需要在你需要进行分析的页面,打开插件,点击Generator report,之后只需要等待片刻,即可生成关于该页面的性能报告,下图为Testerhome 首页的报告(之后其他工具的例子都会以testerhome首页来举例)

从图中可以看到该工具从Performance,Accessibility,Best Practices, SEO几个方面进行了评测和打分。并且还有下面还有很详细的分析,甚至指出错误的地方,配以chrome NetWork的限速功能,可以测试弱网环境下前端首屏加载的性能

在Chrome60的版本中,DevTools就引入了Audtis的选项,其实就是基于LightHouse来做的

WebPageTest

WebPageTest可以帮助我们分析网站在不同的网络下的情况,并且可以选择各式各样的设备,不同国家的网络来进行分析,最后产出的报告可以从很多指标来分析,具体的图我就不截了,这个上手很简单,大家可以用自家的官网去体验一下。

Chrome DevTools Performance

Chrome中自带的Performance工具应该有不少同学是知道的。使用起来也很方便,只需要录制网站从输入网址到加载完成以及渲染完成的过程,最后即可产出报告,即可分析网站的首屏性能。

我个人是很喜欢这个工具的,相较于上面提到的工具,Performance可以更加全面的分析网站性能,从网络资源的加载以及Script的执行过程性能都能够看的到,并且能够清晰的看到浏览器发生了多少次重绘与回流,这样测试完成后可以指出并提交给前端同学进行优化。感觉不好的地方就是产出的东西太多了- - ,过滤出有用的信息也颇为耗时。

React Profiler

因为我是比较喜欢前端三大框架中的React,所以以React的性能分析工具来进行说明。相信的大部分做管理系统的同学公司也是使用React,在React16版本中,在Chrome的React插件中引入了React Profiler,官方文档,开发者只需要配置下即可插件中使用它,这里我使用React写了一个很简单的Reminder网页来进行演示。

React16之后处理任务主要分为两个阶段,render阶段比较哪些变更需要处理DOM(DOM Diff),commit阶段完成变更,也就是从js对象到DOM的更新,并且会执行生命周期函数。上图中我标出的地方就是关于React Commit的记录,每一根柱子即代表一次commit,从柱子的长度和颜色可以判断对应的commit执行的时长,配合选择组件可以定位页面中哪个组件在进行哪个操作时导致的commit时长最长,从而来优化性能。

结语

相信大部分同学在做性能测试的时候更加会集中于服务端,但有时候前端的性能是关联到用户体验等等方面(例如首屏加载,SEO等),在现在的寒冬大环境下能够多掌握一些方面也不失为个人的亮点。

最后感谢您的阅读,如果您觉得文中哪里说的不对还望能够指出,谢谢!

共收到 3 条回复 时间 点赞

有张图没加载出来。。。仔细一看是markdown写错了😂

keke 回复

写快了😂,等会改下。

如果performance可以数据化,通过diff应该可以更快的知道慢到哪了

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册