Web前端測試要點

Web前端測試維度：

• 功能性：功能準確性、兼容性
• 易用性：易學性、易理解性、易操做性、吸引性
• 可靠性：成熟性、容錯性、穩定性、可恢復性、安全性
• 可移植性：適應性、易安裝性、兼容性
• 可維護性：易分析性、易測試性
• 效率：時間特性、資源利用性

調優勢：

1. 減小http請求的數量

2. 用好瀏覽器緩存機制

3. 利用GZIP壓縮機制：只針對文本類資源有效

4. 把CSS文件放在HTML的開頭

5. 把JavaScript文件放到HTML的結尾

6. 避免CSS表達式

7. 減小DNS查找：把域名解析成IP地址

8. 最好使用JavaScript壓縮 var username;->var u;

9. 避免重定向redirect

10.去除重複的腳本

11.使用Ajax請求：局部刷新

12.使用CDN，內容分發網，區域類的緩存服務器，靜態內容

 

HTTPWatch進行性能分析

Time Chart時間分析：

Blocked：瀏覽器預處理的時間----緩存查找+等待時間（線程資源佔用等）

DNS Lookup：域名解析----域名解析成IP地址，一個域名只會解析一次

Connect：創建http/https鏈接的時間

Send：請求開始到發完的時間

Wait：服務器端的處理時間0.9 +極少的網絡時間0.1

Receive：從響應的第一個字節開始到接收完爲止

TTFB：從剛開始發送請求到接收第一個本身爲止

Network：從剛開始發送請求到接收字節結束

 

減小請求的數量：

• 減小重定向請求
• 減小預處理的時間
• 減小TCP鏈接的時間
• 減小發送請求的時間
• 減小服務器端硬盤IO的時間：小圖合成一張大圖，前端利用css定位座標顯示特定圖片；把css都寫到前端代碼中；較少域名的數量能夠減小DNS的解析時間
• 減小瀏覽器渲染的時間

 

文本類資源壓縮狀況：HTML、CSS、JavaScript、其餘文本內容

• 減小內容自己的大小—空格、tab鍵等不可見字符；註釋；變量名或函數名使用短名稱

• 使用GZIP在傳輸過程當中壓縮

 

其餘分析優化技術：

• 緩存：緩存控制有兩個字段：Cache-Control有不少選項（可百度）、Expires過時時間
• Css放在開頭
• JavaScript放在結尾
• CSS表達式
• Ajax請求：x-requested-with：XMLHttpRequest

 

Web可用性測試

• 用戶體驗性 User Experience
• 使用感覺：清爽、美觀、簡潔

 

兼容性測試

前端兼容性：

• 客戶端操做系統：PC（windows1-10，Mac OS）、手機、響應式佈局css3-media
• 客戶端瀏覽器:IE、Firefox、Safari、Chrome、UC、Opera、QQ-360-Sohu-Baidu（手機的雲測試平臺）
• 客戶端分辨率
• 客戶端處理能力

後端兼容性：

• web服務器
• 腳本引擎
• 數據庫
• 操做系統

 

安全性測試

利用安全性測試技術，找到潛在的漏洞

• 認證與受權：登陸認證；受權-權限管理；避免未經受權的頁面能夠直接訪問（經過Session變量判斷isLogin）
• Session與Cookie：Session保存在服務端、Cookie保存在客戶端，避免保存敏感信息到Cookie文件中；SessionID-Cookie欺騙
• DDOS拒絕服務攻擊：分佈式拒絕式服務供給，瘋狂的向服務器發請求
  ----肉雞：遠程控制其餘電腦發送請求（擴大服務器資源）；
  ----攻擊聯盟
  ----利用TCP創建鏈接的規則三次握手 C>S、S>C、C>S，客戶端用假IP向服務端發送請求，服務端沒法響應則等待消耗時間，須要修改底層
• 文件上傳漏洞
• XSS跨站攻擊：獲取用戶的信息、釣魚網站
• SQL注入
• 暴力破解