使用IE11的F12开发人员工具进行网页前端性能测试
公司的新项目，用户使用的时候反馈说反应很慢，要我们做性能优化。
先介绍一下这个系统：一个电子办公系统，基本上都是局域网中使用，也没多少用户同时在线，没必要做高并发。
首先用loadrunner跑一个用户，看了一下事务时间。发现服务器端的事务响应时间都在0.5s以内，吞吐量大的事务耗费的时间也在1s以内，服务器资源使用正常，加了几个并发也没有看到资源利用率有明显升高，可以排除是服务器端的问题了。
系统在使用时，一个事务的等待时间大约几秒到十几秒，数据量大的事务近二十秒了，既然服务器端测试得到的事务时间那么短，也就是说在零点几秒内服务器已经完成了它响应、分析、传送等任务。那么时间肯定是前端消耗的了。（局域网，网络没问题）。
查了查前端性能测试的资料，比较少，工具也不好用。尝试了firefox的firebug，不直观，而且项目主要兼容IE11的，那就直接用IE的工具好了。
-------------------------------------------------------------------进入正题了。-----------------------------------------------------
用IE访问被测网站（我的是IE11，EDGE浏览器相同），定位到你要测试的动作所在页面或被测页面的前一页。按F12调出开发人员工具，其它的功能我就不介绍了，直接切换到性能选项卡。
根据提示按快捷键ctrl+E或点击左上角的开始按钮进行分析。
接着在被测页面做操作，这里我的操作是打开一个列表，因为系统使用过程中感觉打开列表的速度很慢。可以做多个操作一起分析，这里为了方便分析，我只测试一个事务，与loadrunner测试时设置的事务对应。
等到页面加载完毕，点击F12工具左上角的结束按钮或再次使用快捷键ctrl+E停止分析会话，等待一会儿程序分析数据生成报告图表。
报告很直观，可以拖动选择上面时间轴的区域，我们选择CPU利用率大的区域，后面的区域由于刚刚我去喝了杯水没有及时按停止所以也录了下来，其实在50秒左右事务已经完成了。下面的时间线板块，我们选择按持续时间排序，这样我们就找到了耗时最长的事件。可以把事件展开查看事件下的动作，继续分析是哪些动作导致了耗时那么长。
