[ 路丁前言 ] 内下內容出自《小强软件测试疯狂讲义》一书1. 检测目地根据关键作用网页页面的前端开发功能测试，从前端开发剖析造成网页页面回应迟缓的缘故，并依据提升提议对其开展提升，提高前端开发特性，进而做到提高系统软件总体特性的目地。
2. 检测范畴
关键对客户常见的网页页面开展检测，最少包含：主页、各归类页、百度搜索页等，这里大家即为主页为例子开展检测和剖析。
3. 测试标准
运用YSlow、PageSpeed等专用工具开展检测，因该网址是第三方的并并不是我们自己的，因此 没法开展埋点检测。别的的测试标准大伙儿可自主训练。
4. WEB端检测結果剖析
根据YSlow、PageSpeed等专用工具的检测后，综合性結果并算不上好，归属于较弱的状况，在其中YSlow得出的定级是F（最烂），实际結果剖析以下：
l 存有较多的HTTP恳求。在其中有16个external Javascript scripts，七个external stylesheets，18个external background images，这种都能够试着开展合拼。
l 未应用CDN。
l 未指定无效時间。一部分CSS、JS和照片等静态数据資源未指定无效時间，特别是在像logo那样的不常常转变的照片应当特定Expires headers，可标示电脑浏览器从本地磁盘中载入之前免费下载的資源，而不是根据互联网载入。
l 未开启缩小。一部分CSS、JS和照片等静态数据資源未开启缩小，为这种資源資源开启缩小可将其传输尺寸降低135.2 KiB (68%)。
l 未提升照片。适度地设定图片的格式并开展缩小能够节约很多的数据信息字节数室内空间。尤其是对相近客服热线.jpg那样的照片。对这种图片资源开展提升后可将其尺寸降低282.1 KiB (47%)。
l 不要在HTML中开展图片缩放。本站有11个照片开展了放缩。YSlow得出的提议是：你期待呈现多大的图片，初始的图片尺寸就应该是多少，照片不必比期待的规格小，也不必比必须的规格大。
例如，如果我们规定实际一个200x200的照片，而大家的初始照片仅有100x100，浏览的情况下电脑浏览器必须等待图片彻底免费下载结束以后才知道照片的具体规格，随后才会分辨照片是不是考虑预订的规格尺寸，假如变大就需要变小，假如变小就需要变大。也就是说：图片下载结束以前，电脑浏览器没法恰当得出分辨，并且照片的画面质量也将会遭受危害。
5. 手机端检测結果剖析
手机端发觉的难题及其必须提升的資源同4.WEB端检测結果剖析中的內容，此外，也有以下內容必须开展提升：
l 文字大小没法响应式，在手机端不清楚。
l 挪动端网页页面沒有响应式，导致用户必须水准翻转显示屏，如图所示8.32所显示。
l 网页页面中仍未设定视口。该网页页面在移动终端上的展现规格将与在桌面上电脑浏览器中一样，因而系统软件会将其变小到合适在挪动显示屏上显示信息的规格。能够在Header区提升相近以下的编码：<meta name=viewport content="width=device-width, initial-scale=1">
在具体运用中也要留意优先的排列，在時间充足时，能够提升全部內容；当時间应急时，能够根据提升优先高且归属于公共资源网的原素来减少前端开发网页页面的响应速度。
对于必须实际提升的URL由于篇数比较有限，这儿就沒有一一列举
评论