前端性能測試：工具使用和分析

1.? ?參考地址：

http://www.genshuixue.com/i-cxy/p/7682961

2.??? 工具：

Yslow , pagespeed? webpagetest

3. Yslow是谷歌插件，可在擴展程序中添加

4. pagespeed和webpagetest都是在線網(wǎng)站

http://www.webpagetest.org/result/170707_BF_2WR/1/details/

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.baidu.com%2F&tab=desktop

性能評測網(wǎng)站：https://gtmetrix.com/

5. 檢查ajax是否過CDN緩存

谷歌瀏覽器安裝插件：?Akamai debugheaders

查看ajax請求的?ResponseHesders? ?對應(yīng)的 X-cache 字段：字段值包含“HIT”則為存在CDN緩存，字段值為“MISS”則不存在CDN緩存；

(PS：緩存時間長短關(guān)注 Cache-control字段，如果字段值中的max-age=0，那么為即無；>0為存在緩存，時間單位為秒)

6. 如何編寫一份前端性能測試報告

主要分成四個部分編寫：

網(wǎng)站前端性能測試評分

響應(yīng)時間和請求數(shù)(競品對比)

頁面耗時分析

優(yōu)化建議

(1)測試得分：https://gtmetrix.com/

(2)響應(yīng)時間+請求數(shù)測試平臺：https://www.webpagetest.org/

術(shù)語解析：

1、第一字節(jié)響應(yīng)時間(first byte)

從用戶開始導(dǎo)航到頁面直到服務(wù)器響應(yīng)的第一位到達的時間。此時間的大部分時間通常稱為“后端時間”，是服務(wù)器為用戶構(gòu)建頁面所花費的時間。

2、文檔完成時間(load time)

該加載時間是指從用戶開始瀏覽頁面，直到文檔完成事件(通常是當(dāng)所有的頁面內(nèi)容的加載)的時間。這通常在所有圖像內(nèi)容加載后發(fā)生，但可能不包括由javascript執(zhí)行觸發(fā)的內(nèi)容。

3、頁面開始渲染時間(Start render)

指的是瀏覽器開始渲染的時間，從用戶角度出發(fā)則可以定義為用戶在頁面上看到第一個內(nèi)容的時間；

該時間決定著用戶對頁面的第一體驗時機，如果時間越短給用戶的體驗則是頁面速度越快，這樣用戶等待其余內(nèi)容展現(xiàn)的耐心也會更大一些。如果時間過長，則用戶會在長時間內(nèi)面對的都是一個空白的頁面，這對用戶的耐心將是一個考驗；

4、首屏響應(yīng)時間(speed index)

速度指數(shù)是顯示頁面可見部分的平均時間。它以毫秒表示，并且取決于視圖端口的大小。

5、完全加載時間(Fully Loaded)

頁面完全加載完成的時間，即：文檔完成后沒有網(wǎng)絡(luò)活動2秒。這通常包括主頁加載后由javascript觸發(fā)的任何活動

測試標(biāo)準：

第一字節(jié)響應(yīng)時間<=1秒

頁面開始渲染時間<=3秒

首屏響應(yīng)時間<=5秒

F得分項 = 0

響應(yīng)時間和請求數(shù)(競品對比)

? (1)假設(shè)測試的URL是

https://www.newchic.com

? ? 1)輸入URL和選擇測試的地理位置，瀏覽器

(2)高級設(shè)置：可以參考：

https://www.cnblogs.com/strick/p/6677836.html

(3)設(shè)置后開始執(zhí)行，查看結(jié)果

TTFB是指請求響應(yīng)的第一個字節(jié)的時間(重定向時間+連接時間+后端持續(xù)時間)

(4)編寫報告時，需要把上面的數(shù)據(jù)記錄

首次訪問

非首次訪問

重點關(guān)注：

第一字節(jié)時間

頁面開始渲染時間；

首屏?xí)r間

文檔完成時間

完全加載時間

(5)查看請求數(shù)和域名數(shù)

統(tǒng)計結(jié)果如下：

重點關(guān)注：首屏請求個數(shù)

頁面耗時分析

(1)頁面解析耗時——各個加載節(jié)點 (數(shù)據(jù)來自gtmetrix)

記錄下結(jié)果，待優(yōu)化頁面性能后，前后作對比

(2)Chrome DevTools：查看請求

1.是否存在重復(fù)的請求

2.是否圖片空白部分太多

3.是否圖片尺寸不對

4.是否存在多余的資源

5.檢查非200的請求

優(yōu)化建議(優(yōu)先處理F等級的)

? (1)分析方向：

1.使用CDN(Effective use of CDN)

2.啟用壓縮GZIP(Compress Transfer)

3.壓縮圖片(Compress Images)? 【對比 gtmetrix--PageSpeed中Optimizeimages】

4.縮小JS(Minify JavaScript) 和內(nèi)聯(lián)JS (Inline smallJavaScript)

5.縮小HTML(Minify HTML)

6.縮小CSS(Minify CSS)

7.把CSS放在頭部(PutCSS in the document head)

8.減少DOM元素的數(shù)量?????? 【數(shù)據(jù)取gtmetrix--yslow】

9.指定圖像尺寸 Specify imagedimensions? 【數(shù)據(jù)取gtmetrix--PageSpeed】

10. 延遲推遲JS? Defer parsingof JavaScript【數(shù)據(jù)取gtmetrix--PageSpeed】

11. 減少http請求 Make fewerHTTP requests? 【數(shù)據(jù)取gtmetrix--yslow】

減少http請求的方式，如下有兩種方式設(shè)置緩存，測試時注意常用資源是否請求資源時否設(shè)置緩存：

Cache-Control

“no-cache”指示請求或響應(yīng)消息不能緩存(HTTP/1.0用Pragma的no-cache替換)

“no-store”用于防止重要的信息被無意的發(fā)布。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存。根據(jù)緩存超時

Expires表示存在時間，允許客戶端在這個時間之前不去檢查(發(fā)請求)，等同max-age的效果。但是如果同時存在，則被Cache-Control的max-age覆蓋。

設(shè)置方式：通過HTTP的META設(shè)置expires和cache-control?

往期回顧：

mock + fidder如何應(yīng)用在測試中

?dubbo接口界面化調(diào)試工具(二)

?dubbo接口界面化調(diào)試工具(一)

- END -

總結(jié)

以上是生活随笔為你收集整理的highcharts如何把图多余的空白页面_如何进行前端性能测试入门篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。