生活范文化
新浪微博
微信
当前位置:生活范文化网 » 视频

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

1、WebPageTest

http://www.webpagetest.org/

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

可以看到Web程序是否使用Keepalive、是否压缩、是否使用CDN、是否启用缓存等信息

可以穿透进去看对应信息。

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

可以看到加载时间等概要信息。

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

可以看到优化清单

2、友云音

http://ycm.yonyou.com/

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

可以看到慢Ajax、慢页面数等。

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

也可以看到PV和页面加载时间等。

3、page speed

谷歌插件现在已经停止服务。

4、Timeline工具

Timeline面板

打开chrome开发者工具,切换到Timeline选项卡,界面如下:

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

功能很多,非常复杂是不是,对应E问不好的同学,真的是无从下手,幸好有翻译工具,下面我们一步一步的揭开这个工具的神秘面纱。

强烈建议在浏览器隐身模式下使用这个工具,并且禁用一切无关的插件,因为这些插件会影响测试的结果。

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

工具默认是不开启记录的,如果要分析页面,请点击圆形的记录按钮,按钮变红后就可以开始记录页面的各个事件了,这个时候可以在页面上做各种操作,Timeline工具会详细的记录下各类事件。建议不要记录太久,太多会增加分析的难度。

颜色的属性

Timeline工具里面使用是4种颜色来表示不同类别的事件:

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

蓝色:加载;

黄色:脚本;

紫色:渲染;

绿色:绘制

过滤

过滤面板可以对不同类型的事件和花费时间进行过滤,非常好用:

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

事件模式

在这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。

我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围,如下图:

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

在DETAILS面板中可以查看该记录范围内各类型事件的时间开销:

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

other表示其它事件花费的时间,Idle表示空闲时间 ,也可以在DETAILS面板中查看单个记录的时间开销,如下:

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具

5、Netwoek工具

可以看到页面大小、请求数和加载时间以及从网站开始到结束的总时间

跟我学:工欲善其事必先利其器,那些有用的web性能监控工具