中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

某網站前端頁面性能測試

發布時間:2020-06-19 02:40:06 來源:網絡 閱讀:4735 作者:小強測試 欄目:軟件技術

1頁面性能測試概述

頁面性能測試則是針對于頁面性能優化而開展的一種性能測試,目的是對Web系統的頁面進行測試以確認系統頁面是否會影響系統的性能并為頁面的優化提供依據與建議,最終提升系統的整體性能表現,提高用戶體驗滿意度。他的關注點是在與頁面,不在于后端。有別于我們通常說的性能測試。

相對于C/S架構的應用系統,Web應用系統所有數據都需要從服務器端下載,雖然瀏覽器有緩存機制,但客戶每次訪問仍然需要下載大量

很多人覺得如果有大量服務器做支撐,就不會存在性能問題,其實是不對的,當硬件達到一定水準后提升硬件已無作用。舉個例子,當一個頁面中包含幾百個請求,頁面中沒有經過優化的javaScript文件、CSS 文件與圖片件大小達到10MB,即使當前只有一個用戶在訪問該系統,頁面的訪問速度也會慢得驚人,縱使增加再多的服務器也不見得會有明顯的性能提升。

2提高頁面性能的一般方法

2.1減少請求和響應的往返次數

HTTP緩存是最好的減少客戶端服務器端往返次數的辦法。緩存提供了提供一種機制來保證客戶端或者代理能夠存儲一些東西,而這些東西將會在稍后的HTTP 響應中用到的。(即第一次請求了,到了客戶端,緩存起來,下次如果頁面還要這個JS文件或者CSS文件啥的,就不要到服務器端去取下來了,但是還是要去服務器上去訪問一次,因為請求要對比ETag值。

2.2減少請求和響應的往返字節大小

l 使用更少的圖畫

l 將所有的CSS濃縮到一個CSS文件中

l 將所有的腳本濃縮到一個JS文件中

l 簡化你的頁時間

l 使用HTTP壓縮

PS:貌似太理想化了。。。。。

2.3太多了yahoo的22條規則,值的參考

3頁面性能測試的環境搭建

環境為:Yslow+ShowSlow+WAMP(VertrigoServ)

步驟如下:

n 創建一個db為showslow

n 導入下載的ShowSlow中的tables.sql

n 把下載的ShowSlow放到www目錄下,修改config.php中的

$db = 'showslow';

$user = 'root';

$pass = '123456'; //密碼根據你的情況修改。

n 打開ff配置about:config

過濾器:yslow

修改下面三項內容:

extensions.yslow.beaconUrl=

http://localhost.com/showslow/beacon/yslow/

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

n 重新啟動瀏覽器:在瀏覽器內輸入http://localhost/showslow/

n 如果頁面上沒有任何錯誤提示的話,恭喜你,你太幸運了。

n 啟動ff,進入ShowSlow,然后在打開要測試的頁面啟動yslow

4測試范圍

對線上的部分頁面進行測試,如下:

www側:首頁、單品頁、我的訂單頁

seller側:訂單管理

5 測試結果與分析

5.1 www側:首頁

測試時間:2011-9-30

地點:公司

5.1.1 減少http request

8個外部js

4個外部css

10個外部background images

不知是否可以使用CSS Sprites整合圖片、合并CSS文件、合并JS文件。

5.1.2 加入CDN

html.xxx.com

www.xxx.com

log.xxx.com

img.xxx.com

5.1.3 設置過期的http header

可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中,不過也有一定的風險,畢竟js和css有一定的邏輯

具體列表見 首頁-沒有設置過期的http header的東東.txt

5.1.4 對頁面組件進行gzip壓縮

首頁中有以下東東,不知是否可以進行壓縮處理

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/index0902.css

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

PS:這個是一個在線的壓縮工具,個人感覺不錯,能給出比較好的壓縮信息與參數,方便調試,地址:http://tool.lanrentuku.com/csszip/

5.1.5 js的位置

為了實現最大的下載并行,頁面加載初期做的事,最好只有HTML的下載,CSS的下載,JS的下載等,下載完成后再去實現頁面渲染,JS腳本運行等。所以一般的處理辦法還是頁面頭部引入JS鏈接,頁面底部執行JS腳本程序。

下面的鏈接,我試了下,除了第一個,剩余的都可以放到底部

· http://www.xx.com/js/jquery.js

· http://html.xx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

5.1.6 設置ajax緩存

雖然ajax是異步的,但不能保證不會等待異步的這段時間,不過為避免重復的ajax請求,加上緩存也是件好事吧J

首頁測試的時候只有一個地址,如下

http://www.xxx.com/ajax/loginInfoAjax.jhtml?jsoncallback=jsonp1317353338559

我看這個貌似是會員的一些信息,包括購物車中商品數,用戶名、狀態等

5.1.7 減少DOM元素的數量

首頁中差不多有1584個DOM elements

是否可以優化下首頁結構,畢竟首頁是門簾,用戶體驗也很重要的!

5.1.8 盡量使用與域名無關的cookie

所謂的 cookie-free domains 就是在瀏覽器發送靜態內容的請求時不會發送cookies 的域名。首頁中有如下:

· http://www.xxx.com/js/100023.js

· http://html.xxx.com/html/images/header0811/bor.gif

· http://html.xxx.com/html/images/header0811/menu.png

· http://html.xxx.com/html/index0601/indexbg.png

· http://html.xxx.com/html/index0601/boder.gif

· http://html.xxx.com/html/index0601/h3bg.gif

· http://html.xxx.com/html/index0601/floorico.png

· http://html.xxx.com/html/index0601/botdy.gif

我看這里面有些圖片一般是不會改變的,是否考慮放到靜態服務器上,以減少cookie的反復傳輸對主域名的影響。

5.1.9 簡單的統計數據

某網站前端頁面性能測試

5.2 www側:單品頁

測試單品頁為:

http://www.xxx.com/goods/3B2BDB2CF26A4641_453v4563.html

測試時間:2011-9-30

地點:公司

5.2.1減少http request

有21個外部js

6個外部css

12個外部background images

不知是否可以使用CSS Sprites整合圖片、合并CSS文件、合并JS文件不知是否可以使用CSS Sprites整合圖片、合并CSS文件、合并JS文件

5.2.2設置過期的http header

可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中,不過也有一定的風險,畢竟js和css有一定的邏輯。

詳細的URL見 單品頁-沒有設置過期的http header.txt

5.2.3對頁面組件進行gzip壓縮

單品頁中有以下東東,不知是否可以進行壓縮處理

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/details0629.css

· http://html.xxx.com/im/css/webIM.css

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

· http://html.xxx.com/html/js/ajax.js

· http://im.xxx.com:9090/cdmocsc/commons/connection.jsp?...

· http://html.xxx.com/im/cdjs/jquery-1.4.2.min.js

PS:這個是一個在線的壓縮工具,個人感覺不錯,能給出比較好的壓縮信息與參數,方便調試,地址:http://tool.lanrentuku.com/csszip/

5.2.4 js的位置

單品頁中太多的js放到了頭部

· http://www.xxx.com/js/jquery.js

· http://www.xxx.com/js/jquery.cookie.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://www.xxx.com/js/qt.js?...

· http://www.xxx.com/js/pageutil_20110706.js

· http://www.xxx.com/js/goodsdetail_20110705.js

· http://www.xxx.com/js/jquery.countdown.1.0.js

· http://www.xxx.com/js/jquery.lazyload.mini.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

大部分的js都可以放到底部,尤其是一些直接寫的function

5.2.5 避免css表達式

http://html.xxx.com/html/css/details0629.css

僅此一個,有時候迫不得已使用,不過還是少用為好,哈哈,這個玩意強大又危險

5.2.6 減少DNS查找

· www.xxx.com: 21 components, 285.7K (88.5K GZip)

· html.xxx.com: 31 components, 428.6K

· log.xxx.com: 1 component, 12.4K (4.1K GZip)

· img.xxx.com: 51 components, 409.2K

· space.feixin.10086.cn: 1 component, 0.0K

· wpa.qq.com: 1 component, 0.0K

· im.xxx.com: 1 component, 2.7K

沒辦法,這個沒法控制的很好,即使是淘寶也一樣,暫且飄過吧~

5.2.7減少DOM元素的數量

此單品頁中有1243 DOM elements,呃。。。。和首頁快有一拼了。。。。。

5.2.8 簡單的統計數據

某網站前端頁面性能測試

左側圖表顯示是頁面元素在空緩存的加載情況,右側為頁面元素使用緩存后的頁面加載情況

呃。。。這請求數貌似是比較多,趕上首頁了,嘿嘿


向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

青铜峡市| 邻水| 鄂托克旗| 乌审旗| 锦屏县| 闽侯县| 安仁县| 增城市| 永川市| 铁力市| 昌平区| 乌海市| 闻喜县| 凤城市| 子长县| 兴安盟| 逊克县| 莱西市| 靖西县| 虹口区| 漾濞| 桃园县| 朝阳区| 宜春市| 金沙县| 邢台县| 元氏县| 来安县| 婺源县| 菏泽市| 华安县| 乌拉特前旗| 徐州市| 青铜峡市| 安平县| 蒲城县| 巴东县| 福安市| 丹凤县| 阳江市| 白沙|