【小强软件测试疯狂讲义】前端性能测试目的通过主要功能页面的测试

122932977

以下内容选自《小强软件测试狂讲》一书

1. 测试目的

通过主要功能页面的前端性能测试，从前端分析页面响应慢的原因，根据优化建议进行优化，提升前端性能，从而达到目的是提高系统的整体性能。

2. 测试覆盖率

主要测试用户常用的页面，至少包括：首页、各类分类页面、搜索结果页面等，这里我们仅以首页为例进行测试分析。

3. 测试方法

使用YSlow等工具测试软件测试和前端开发哪个更有前景，因为网站是第三方的，不是我们自己的，所以无法进行埋地测试。其他测试方法可以自己练习。

4.Web端测试结果分析

经过YSlow等工具的测试，综合效果不好，属于较差的情况。YSlow给出的评级为F（最差），具体结果分析如下：

l HTTP请求很多。有16、7、18个，都可以尝试合并。

l 不使用CDN。

l 没有指定过期时间。CSS、JS、图片等一些静态资源没有指定过期时间，特别是logo等不经常变化的图片应该指定，这样可以指示浏览器从本地磁盘加载之前下载的资源，而不是通过网络加载.

l 未启用压缩。一些静态资源（例如 CSS、JS 和图像）没有启用压缩。为这些资产启用压缩可将其传输大小减少 135.2 KiB (68%)。

l 图片未优化。正确格式化和压缩图像可以节省大量数据字节。尤其是像客服电话.jpg这样的图片。优化这些图像资源可将其大小减少 282.1 KiB (47%)。

l 不要在 HTML 中进行图像缩放。这个网站有11张放大的图片。YSlow 给出的建议是：只要你想显示图像，原图尺寸要和原图尺寸一样大，并且图像不能小于预期尺寸，也不能大于所需尺寸。

例如，如果我们要一张真实的图片，而我们的原始图片只有可用，浏览器需要等待图片下载完成后才知道图片的实际大小，然后判断图片是否符合预定的大小. 小了就缩小天外神坛，小了就放大。也就是说：浏览器要等到图片下载完成后才能做出正确的判断，图片的清晰度也可能会受到影响。

5. 移动端测试结果分析

移动端发现的问题和需要优化的资源与4.WEB测试结果的分析结果相同。此外，还有以下内容需要优化：

l 字体大小无法适配，移动端看不清楚。

l 移动端页面不自适应软件测试和前端开发哪个更有前景，需要用户横向滚动屏幕，如图8.32。

l 页面上没有设置视口。该页面将在移动设备上以与在桌面浏览器中相同的大小呈现，因此将按比例缩小以适应移动屏幕。您可以在区域中添加类似于以下的代码：

在实际应用中，还要注意优先级的排序。时间充足时，可以优化所有内容；当时间紧迫时，可以通过优化高优先级和属于公共资源的元素来缩短前端页面的响应时间。

至于具体需要优化的网址，限于篇幅，这里就不一一列举了。