內(nèi)下內(nèi)容選自《小強(qiáng)軟件測(cè)試瘋狂講義》一書
1. 測(cè)試目的
通過(guò)主要功能頁(yè)面的前端性能測(cè)試，從前端分析引起頁(yè)面響應(yīng)緩慢的原因，并根據(jù)優(yōu)化建議對(duì)其進(jìn)行優(yōu)化，提升前端性能，從而達(dá)到提升系統(tǒng)整體性能的目的。
2. 測(cè)試范圍
主要對(duì)用戶常用的頁(yè)面進(jìn)行測(cè)試，至少包括：首頁(yè)、各分類頁(yè)、搜索結(jié)果頁(yè)等，此處我們只以首頁(yè)為例進(jìn)行測(cè)試和分析。
3. 測(cè)試方法
利用YSlow、PageSpeed等工具進(jìn)行測(cè)試，因該網(wǎng)站是第三方的并不是我們自己的，所以無(wú)法進(jìn)行埋點(diǎn)測(cè)試。其他的測(cè)試方法大家可自行練習(xí)。
4. WEB端測(cè)試結(jié)果分析
通過(guò)YSlow、PageSpeed等工具的測(cè)試后，綜合結(jié)果并不算好，屬于較差的情況，其中YSlow給出的評(píng)級(jí)是F（最差），具體結(jié)果分析如下：
l 存在較多的HTTP請(qǐng)求。其中有16個(gè)external JavaScript scripts，7個(gè)external stylesheets，18個(gè)external background images，這些都可以嘗試進(jìn)行合并。
l 未使用CDN。
l 未指定失效時(shí)間。部分CSS、js和圖片等靜態(tài)資源未指定失效時(shí)間，尤其像logo這樣的不經(jīng)常變化的圖片應(yīng)該指定Expires headers，可指示瀏覽器從本地磁盤中加載以前下載的資源，而不是通過(guò)網(wǎng)絡(luò)加載。
l 未啟用壓縮。部分CSS、JS和圖片等靜態(tài)資源未啟用壓縮，為這些資源資源啟用壓縮可將其傳送大小減少135.2 KiB (68%)。
l 未優(yōu)化圖片。適當(dāng)?shù)卦O(shè)置圖片的格式并進(jìn)行壓縮可以節(jié)省大量的數(shù)據(jù)字節(jié)空間。尤其是對(duì)類似客服電話.jpg這樣的圖片。對(duì)這些圖片資源進(jìn)行優(yōu)化后可將其大小減少282.1 KiB (47%)。
l 不要在HTML中進(jìn)行圖片縮放。本網(wǎng)站有11個(gè)圖片進(jìn)行了縮放。YSlow給出的建議是：你希望展現(xiàn)多大的圖片，原始的圖片大小就應(yīng)該是多大，圖片不要比期望的尺寸小，也不要比需要的尺寸大。
比如，如果我們要求現(xiàn)實(shí)一個(gè)200x200的圖片，而我們的原始圖片只有100x100，訪問(wèn)的時(shí)候?yàn)g覽器需要等待圖片完全下載完畢之后才知道圖片的實(shí)際尺寸，然后才會(huì)判斷圖片是否滿足預(yù)定的尺寸大小，如果大了就要縮小，如果小了就要放大。換句話說(shuō)：圖片下載完畢之前，瀏覽器無(wú)法正確給出判斷，而且圖片的清晰度也可能受到影響。
5. 移動(dòng)端測(cè)試結(jié)果分析
移動(dòng)端發(fā)現(xiàn)的問(wèn)題以及需要優(yōu)化的資源同4.WEB端測(cè)試結(jié)果分析中的內(nèi)容，除此之外，還有如下內(nèi)容需要進(jìn)行優(yōu)化：
l 字體大小無(wú)法自適應(yīng)，在移動(dòng)端不清晰。
l 移動(dòng)端的頁(yè)面沒(méi)有自適應(yīng)，導(dǎo)致用戶需要水平滾動(dòng)屏幕，如圖8.32所示。
l 頁(yè)面中并未設(shè)置視口。該網(wǎng)頁(yè)在移動(dòng)設(shè)備上的呈現(xiàn)尺寸將與在桌面瀏覽器中一樣，因此系統(tǒng)會(huì)將其縮小到適合在移動(dòng)屏幕上顯示的尺寸?？梢栽贖eader區(qū)增加類似如下的代碼：<meta name=viewport content="width=device-width, initial-scale=1">
在實(shí)際應(yīng)用中還要注意優(yōu)先級(jí)的排序，在時(shí)間充裕時(shí)，可以優(yōu)化所有內(nèi)容；當(dāng)時(shí)間緊急時(shí)，可以通過(guò)優(yōu)化優(yōu)先級(jí)高且屬于公共資源的元素來(lái)縮短前端頁(yè)面的響應(yīng)時(shí)間。
至于需要具體優(yōu)化的URL因?yàn)槠邢蓿@里就沒(méi)有一一列出
聯(lián)系客服
