性能工具之前端工具梳理

2018-06-06   出处: 7DGroup  作/译者:高楼(Zee)  

经常被问到为什么前端不写性能分析相关的内容。我觉得有几个原因。

  1. 觉得写不专业;2. 不怎么感兴趣。

这个文章也只是梳理下有哪些工具可以用,并没有做深入的分析。

先以我所有的知识,说明一下前端的展现过程。

大致过程如上,在实际的展示过程中,有些是可以并行的。比如html、css下载。这就涉及到http1.1协议的下载局限和浏览器支持的并发数量了。

为了能让人尽快看到页面的内容,浏览器也不会等所有的都干完了再展示,而是逐渐展示。

有的人可能看到页面是一次展示出来的,那就是前端设计的太差了。

另外,不同的浏览器用的内核不一样,所以展示的过程会有细微的差别。


还是回到工具上。

  • charlesproxy

上图展示了一个请求的时间树,可以在性能分析中判断出哪个元素是比较耗时的。

flow视图展示时间。

这个工具要说好呢,也还是不错的,但是要收费,如果和开源的其他工具一比较,这个收费就感觉不值了,哈哈。


  • httpwatch


经典的视图,看着就觉得舒服。这个瀑布视图是我觉得前端性能分析工具中做的最好看的。

各元素的响应时间一目了然。并且也把时间细分的非常好。

但可惜的是它只能支持windows,ipad,iphone。不知道这个工具开发者是怎么想的。

并且这个工具的专业版也收费。


  • safari开发者工具

如果是喜欢简洁的人,这个工具必然是首选。一如既往的mac风格(想想苹果把mac团队拆到iphone就很担心以后的mac电脑的os升级都有可能慢很多呀)。

并且,把几段时间给拆分开在上面也看的很清楚,网络、js、内存、图层渲染。

又免费功能也不少。


  • chrome开发者工具


不仅有safari中的分层展示,还有倒着的火焰图,你说说,真是啥都给你想到了,只需要你睁眼看它就行。

它的网络部分,也是可以明确看到哪个地方浪费了时间的。

又免费又好用。


  • firefox开发者工具

js调用关系图。

网络的瀑布视图也不错,细分也有,dns解析、SSL、发送、接收、缓冲之类的,要啥有啥。

js火焰图也是有的,并且还挺炫丽。

性能视图的树视图,只要看一眼就知道哪慢。


性能的瀑布分的非常细,以致于想看整体还要翻挺长。哈哈。


以上的工具中,都有对前端做调试的功能,下个断点,改个页面参数,复制请求,重发请求,自组装请求之类的。


总之,对于前端的性能分析来说,工具真的已经做的非常完整清晰了。要是说分析时间消耗,看这些就够了。



欢迎给测试窝投稿或参与内容翻译工作,请邮件至editors@testwo.com。也欢迎大家通过新浪微博(@测试窝)或微信公众号(测试窝)关注我们,并与我们的编辑和其他窝友交流。
246°|2467 人阅读|0 条评论

登录 后发表评论
最新文章