核心实验：基于Web前端的性能测试分析！

实验简介

本实验主要利用IE和Chrome的F12开发人员工具结合Web前端测试分析相关知识，对常见网站进行基于前端的性能测试分析，本实验将不会使用到测试开发相关技术，而是纯粹意义上的手工测试，但却是很容易找到系统前端性能及设计问题的很重要的测试手段。

实验目的

（1） 发现Web系统中在前端页面的设计上的不足。

（2） 发现Web系统后台服务器在处理前端交互时设计上的不足。

（3） 从前端页面的角度找到Web系统的Bug。

（4） 对Web系统提出各类可能的改进措施，帮助研发团队完善系统。

实验流程

1. WEB前端测试概述

我们知道，WEB系统主要分为客户端和服务器端。客户端的主要载体就是浏览器，相对比较简单，而服务器端则架构要复杂得多，使用到的技术也更加复杂。但是，话说回来，最终用户在使用的时候不就是一直在与浏览器打交道吗，用户才不关心我们的服务器端到底使用了怎么样的技术和架构。那么，做为一个软件测试人员，我们何不站在一个用户的角度来从WEB前端来进行系统测试与分析，辅助找出一些系统的问题，提升用户使用体验呢？

WEB前端测试分析的意义也就在此，可以以相对更小的代价，更快的速度来对系统可能存在的问题进行分析，如果真正能做好前端的分析，对用户体验和性能提升方面会有很大的正面影响。当然，最好是前端分析与后端分析相结合进行，这样才能对系统有一个全面的了解。

2. 对百度首页进行前端分析

先来对百度的首页面进行监控，看看我们通过前端测试分析技术能发现什么有趣的结果。利用IE的开发人员工具监控整个首页而加载的过程，如下图：

从上述监控结果中，我们可以得到如下的初步结论：

（1） 当输入http://www.baidu.com访问百度搜索引擎时，发送了一共15个请求，0个错误，总共传输了75.49KB的数据。

（2） 整个页面共消耗时间1.6秒，页面渲染的时间为877毫秒。此处要注意的是，这里的1.6秒只是每一个请求的响应时间的简单总和，1.82秒的加载时间才是页面的整体响应时间。由于浏览器都是多线程处理的，同时可以处理多个请求，有可能请求A消耗0.5秒，请求B消耗0.8秒，总消耗时间为1.3秒，但是真实的用户能感知到的响应时间有可能是0.9秒。

（3） 消耗时间最大的请求为下载一个JS的脚本，所花时间为1.18秒，当然，经过对时间的排序，我们也可以看到消耗时间最少的等各种情况（注：具体时间视网络状况将有所差异）。一个10KB的JS脚本&#