1 h5是什麼？ ---可以理解為乙個網頁
①h5來自「html5」，是一種高階的網頁技術，包括html、css和j**ascript在內的一套技術組合
*參考部落格文章：如何識別h5？
html是「超文字標記語言」，是一門描述頁面的標準語言
1）h5：
①開發快，實現的功能也很炫
②只編寫一次，可以再多個裝置上到處執行
③具有侷限性，如會話管理、安全離線儲存、訪問原生裝置功能（攝像頭、日曆和地理位置）--依賴網路
①原生應用程式看起來（介面）和執行起來（效能）是最佳的；能更好的適應各種型別的功能實現 --快取
②開發和測試週期比較長，原生的開發太耗時耗力
①某此固定格式和控制項的、頁面反應速度要求高的模組就採用原生native開發
②對於新聞、大段文字、資訊類的用h5語言的標準實現頁面來載入，將其嵌入原生框架中
③混合應用程式讓開發人員可以把html5應用程式嵌入到乙個細薄的原生容器裡面，集原生應用程式和html5應用程式的優點（及缺點）於一體
3 h5的測試點
功能測試、ui頁面測試、相容性測試、介面(api)測試、安全測試、網路測試、效能測試
3.1功能測試
①登入：目前h5和native各個客戶端都做了互通，測試時應注意：
a.若客戶端已登入，那麼進入h5後仍然是登入狀態
b.若客戶端未登入，進入h5，點選對應按鈕or鏈結。如需登入，須拉起native登入；若取消登入，是否可再次拉起登入，或者停留在的頁面是否有對應的登入提示
②翻頁：遇到翻頁載入的頁面，需要注意內容為1頁或者多頁的情況。資料分頁載入時，注意後續頁面請求資料的正確。這個需要注意在快速操作場景中，請求頁數是不是依次遞增，快速操作
③重新整理與返回：重新整理與返回頁面重新整理是否仍然處於當前頁面，重新整理頁面或者載入新內容時，頁面是否有都懂，使用者主動點選重新整理按鈕是否仍然處於當前頁面，點選返回與back鍵，會退頁面是否是期望頁面
④手機操作：彈窗出現/關閉手機關注互動是否友好，比如彈出層的點選，是否會穿透影響到下面的頁面。手機鎖屏之後展示頁面；退到後台，再重新撥出在前台展示
3.2 ui頁面測試
2）關注頁面展示元素，如選單、對話方塊、視窗和其他可視控制項的布局、風格，文字是否正確，頁面是否美觀，頁面互動操作是否友好，操作是否設計頻繁，是否易操作
3.3 相容性測試
1）瀏覽器相容
②考慮pc端主流瀏覽器，例ie、chrome、firefox
③android和ios自帶瀏覽器：chrome、safari
2）系統相容：覆蓋android和ios最新的試用版本和當前流行的主要版本
3）螢幕相容：相容不同的螢幕大小，包括橫豎屏的適配
3.4安全測試
1）明確投放渠道有哪些，是否對未投放渠道做了限制
2）直接通過url請求是否攔截等；直接url是否能開啟
3）部分敏感資訊是否加密傳輸等
4）防止惡意攻擊 ---sql注入（設計比較少）
3.5 網路測試
2）測試2g/3g/4g/5g/wifi網路的切換
3）測試有網/無網切換下的應用執行
4）弱網測試：延時、丟包
3.6 效能測試
1）伺服器效能測試 ---介面測試
2）客戶端效能測試
①載入速度：頁面的首屏時間、白屏時間、有快取/無快取的載入時間
②（系統）資源占用：cpu、流量、電量、記憶體等的占用
a關注頁面中有的話，盡量縮小
b資源是否壓縮
c對於一些不會變化的，不需要每次都請求的東西，做本地快取
d資料較多時，是否做了分頁載入處理
f反覆訪問，檢查是否占用大量記憶體
H5 測試用例
測試用例 優先順序 前置條件 操作步驟 第2步 檢查首頁 期待結果 首頁顯示正常，沒有ui問題 步驟 第1步 在手機瀏覽器上開啟www.360kad.com，期待結果 介面顯示正常 第2步 在搜尋框中，搜尋 維生素 期待結果 可以搜尋到包含 維生素 的商品。第3步 新增乙個商品到購物車中 第4步 提...
H5 前端效能測試實踐
如下圖所示，是精選平台開啟 h5 頁面的幾個過程截圖。1 載入網路請求 這個過程主要是 webview 拿到 h5 頁面 url 之後，呼叫 loadurl 方法，開始去網路上請求第乙個資源檔案。這個階段主要包含 dns 解析 建立網路鏈結 資料傳輸的耗時。2 html 解析 webview 拿到 ...
H5 前端效能測試實踐
如下圖所示，是精選平台開啟 h5 頁面的幾個過程截圖。1 載入網路請求 這個過程主要是 webview 拿到 h5 頁面 url 之後，呼叫 loadurl 方法，開始去網路上請求第乙個資源檔案。這個階段主要包含 dns 解析 建立網路鏈結 資料傳輸的耗時。2 html 解析 webview 拿到 ...