百度搜索：小強(qiáng)測(cè)試品牌
交流群：229390571
內(nèi)下內(nèi)容選自《小強(qiáng)軟件測(cè)試瘋狂講義》一書(shū)
1. 測(cè)試目的
通過(guò)主要功能頁(yè)面的前端性能測(cè)試，從前端分析引起頁(yè)面響應(yīng)緩慢的原因抵怎，并根據(jù)優(yōu)化建議對(duì)其進(jìn)行優(yōu)化浓恶，提升前端性能逐哈，從而達(dá)到提升系統(tǒng)整體性能的目的。
2. 測(cè)試范圍
主要對(duì)用戶(hù)常用的頁(yè)面進(jìn)行測(cè)試问顷，至少包括：首頁(yè)、各分類(lèi)頁(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纸肉，可指示瀏覽器從本地磁盤(pán)中加載以前下載的資源溺欧，而不是通過(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ì)類(lèi)似客服電話.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)致用戶(hù)需要水平滾動(dòng)屏幕，如圖8.32所示璃搜。
l 頁(yè)面中并未設(shè)置視口拖吼。該網(wǎng)頁(yè)在移動(dòng)設(shè)備上的呈現(xiàn)尺寸將與在桌面瀏覽器中一樣，因此系統(tǒng)會(huì)將其縮小到適合在移動(dòng)屏幕上顯示的尺寸这吻〉醯担可以在Header區(qū)增加類(lèi)似如下的代碼：
在實(shí)際應(yīng)用中還要注意優(yōu)先級(jí)的排序，在時(shí)間充裕時(shí)唾糯，可以?xún)?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)有一一列出
