专栏首页7DGroup性能工具之前端工具梳理

性能工具之前端工具梳理

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

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

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

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

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

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

本文分享自微信公众号 - 7DGroup(Zee_7DGroup),作者:高楼(Zee)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jenkins+SonarQube+Gitlab集成钉钉群消息自动通知(Python版)

    在 Jenkins+SonarQube+Gitlab搭建自动化持续代码扫描质量平台 一文中我们介绍了如何从 0 到 1 搭建一个自动化持续代码扫描质量平台,本文...

    高楼Zee
  • springboot搭建jsp项目

    在这里引用《孟子》:天降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行指乱其所为,所以动心忍性,曾益其所不能。

    高楼Zee
  • 「性能测试实战30讲」之问题问答整理五

    第一个问题:如何理解“服务端的并发能力”这一描述? 首先我们从数据视角来理解,可以把服务端程序用一个模型来看待,即由「网络 API 请求」所驱动的。 服务端的...

    高楼Zee
  • 15个私有云上的 DevOps 开源工具

    在可维护性,可靠性,效率和安全性方面,DevOps 为私有云在改进操作流程方面发挥着重要的作用。私有云是一个由许多硬件和软件组件组成的复杂系统。 对于任何支持的...

    DevOps时代
  • 国内2大Git代码托管网站

    可以说GitHub的出现完全颠覆了以往大家对代码托管网站的认识。GitHub不但是一个代码托管网站,更是一个程序员的SNS社区。GitHub真正迷人的是它的创新...

    张善友
  • 希尔排序

    希尔排序(Shell's Sort)是插入排序的一种又称“缩小增量排序”(Diminishing Increment Sort),是直接插入排序算法的一种更高效...

    Haley_Wong
  • 基于随机森林识别特征重要性(翻译)

    博主Slav Ivanov 的文章《Identifying churn drivers with Random Forests 》部分内容翻译。博主有一款自己的...

    三猫
  • 对代码的领悟之-高质量代码有三要素:可读性、可维护性、可变更性

      我们评价高质量代码有三要素:可读性、可维护性、可变更性。我们的代码要一个都不能少地达到了这三要素的要求才能算高质量的代码。

    Java编程指南
  • 基于 Swoole 的微信扫码登录

    随着微信的普及,扫码登录方式越来越被现在的应用所使用。它因为不用去记住密码,只要有微信号即可方便快捷登录。微信的开放平台原生就有支持扫码登录的功能,不过大部分人...

    企鹅号小编
  • Hive 抽样Sampling

    Block 抽样功能在 Hive 0.8 版本开始引入。具体参阅JIRA - Input Sampling By Splits

    smartsi

扫码关注云+社区

领取腾讯云代金券