使用IE11的F12开发人员工具进行网页前端性能测试

Posted 2020-10-15

用IE访问被测网站（我的是IE11，EDGE浏览器相同），定位到你要测试的动作所在页面或被测页面的前一页。按F12调出开发人员工具，其它的功能我就不介绍了，直接切换到性能选项卡。

根据提示按快捷键ctrl+E或点击左上角的开始按钮进行分析。

接着在被测页面做操作，这里我的操作是打开一个列表，因为系统使用过程中感觉打开列表的速度很慢。可以做多个操作一起分析，这里为了方便分析，我只测试一个事务，与loadrunner测试时设置的事务对应。

等到页面加载完毕，点击F12工具左上角的结束按钮或再次使用快捷键ctrl+E停止分析会话，等待一会儿程序分析数据生成报告图表。

报告很直观，可以拖动选择上面时间轴的区域，我们选择CPU利用率大的区域，后面的区域由于刚刚我去喝了杯水没有及时按停止所以也录了下来，其实在50秒左右事务已经完成了。下面的时间线板块，我们选择按持续时间排序，这样我们就找到了耗时最长的事件。可以把事件展开查看事件下的动作，继续分析是哪些动作导致了耗时那么长。