性能工具之前端工具梳理

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

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火焰图也是有的，并且还挺炫丽。

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

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

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

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