資訊中心管理
功能性 QA 工程師 為何需要追求行動應用程式 效能(上)
下一篇 - 開展企業的 API 經濟規模前 請問你/企業準備好了嗎?

功能性 QA 工程師 為何需要追求行動應用程式 效能(上)

撰文 | 叡揚資訊 資訊安全事業處
現今使用者介面 (UI) 效能已成為涉足 App 發行的潛在遊戲規則。因此，企業應更注重 UI 效能測試，以改善使用者體驗(UX)

現今使用者介面 (User Interface, UI，後續皆使用 UI 簡稱) 效能已成為涉足 App 發行的潛在遊戲規 則。因此，企業應更注重 UI 效能測試，以改善使用者體驗(User Experience, UX，後續皆使用 UX 簡稱)，使在增加客群的同時留住現有客戶。UI 效能取決於現有的功能測試環境。從使用者的角 度出發，能更好地了解網路效能的重要性。其中關鍵是將 App 效能測試整合至 CI / CD 流程。即 可在開發流程一開始就發現問題，並為您的客戶提供更完善的 UX。

在現今競爭激烈的商業環境中，企業需要 依據客戶行為調整經營策略，調整自身 服務以因應不斷變化的客戶需求。智慧型手機 的發明，改變了企業的思考和運營方式。隨著 智慧型手機數量增長，組織必須投入更多資源 在行動應用平台上。因此，效能是開發應用程 式時應考慮的關鍵需求之一。

UI 設計和效能是決定產品成敗的關鍵因素。 而螢幕呈現內容的速度和與內容互動的時間， 是衡量 UI 效能的重要指標。但許多開發人員 將所有精力放在撰寫程式邏輯，而遺忘了 UI/ UX 的重要性。為改善 UI/UX，開發者應該考 量網路、API 和應用程式等效能。而每個開發 人員和測試工程師，在提供更高效能的 App 時 會考慮的議題，如下列項目:

  1. 了解網路運作模式

為了更進一步理解網路運作，首要是查看開放系 統互連網路模型(Open Systems Interconnection Model, OSI，後續簡稱 OSI 模型)，OSI 模型是 促進不同主機之間通訊的標準。

  • 實體層(Physical Layer):舉凡涉及網路 的所有實體設備，例如電纜、交換機、路由 器、以太網等。
  • 資料鏈接層(Data Link Layer):在網路間 建立邏輯連結，且在傳輸過程中處理錯誤偵 測以及流量控制。
  • 網路層(Network Layer):定義網路資料的 路由。
  • 傳輸層(Transport Layer):提供 TCP / IP 通訊協定進行資料傳輸。
  • 會議層(Session Layer):負責資料傳輸中 設定和維護裝置網路中兩台裝置間的通訊連 接。
  • 表現層(Presentation Layer):將資料轉換成 能相容接收者的系統，並適合傳輸的格式。
  • 應用層(Application Layer):提供使用者界 面層，使用者、網路和應用程式進行互動。

網路分層

在實際使用上，瀏覽器和應用程式的溝通行 為會在應用層、表現層和會議層等層中使用 HTTP 進行。TCP 協定在傳輸層中執行，而 IP 協定在網路層中執行。Wi-Fi 在實體層和資 料鏈路層中執行。

網路方面

檢查網路資料傳輸行為時，需考慮下列 3 個重 要因素:

延遲:透過網路將封包從 A 節點傳輸到 B節點，所需的接收回應時間。

流量:在特定時間內傳輸的資料總量，以每秒位數或每秒封包為單位。

封包遺失:主機發送 10 個封包，遺失的封包數量。

TCP 模型中的 Window Sizing

TCP 模型使用 Window Sizing 機制來有效降低 控製網路擁塞並提高資料傳輸效率。利用此機制控制資料發送方在接收到確認之前可以發 送的未確認資料量。

當有封包遺失時，協定會將 Window Sizing 減小一半，並開始緩慢地達到原始Window Sizing。因此，封包遺失會嚴重影響流量。

09 2

09 3

連接故障
這是建立連接時執行的任務:

  • DNS (Domain Name System, 又稱網域名 稱系統)查詢:當使用者在瀏覽器利用網 址列輸入網址，主機將向網路供應商發 送 DNS 請求，並從網路供應商接收 IP 位 置。
  • 安全通訊協定(Secure Sockets Layer, SSL) 交握:為保護資料隱私性和完整性，經 Client 端驗證伺服器鑑別性後，兩者間會 建立安全傳輸通道，進行資料傳輸通訊。 整個建立安全傳輸通道過程稱為”SSL交 握”。
  • 發送請求(Send Request):建立安全連接後，Client 端會將請求發送到伺服器。
  • 等待回應(Wait For Response):Client 端等待伺服器提供的訊息。
  • 下載的內容:當伺服器提供所需訊息時，使用者可下載所需的內容。

為了分析移動效能，計算每個任務的時間很重要09 5

  • DNS Time:使用者在瀏覽器網址列中輸入 URL 嘗試打開網站。DNS 時間是 Client 端 主機與 DNS 伺服器聯繫並接收 IP 位置所花 費的時間。
  • 連接時間:Client 端使用 SYN(Synchronize sequence numbers, 同步序列號)來發起與 網站 Web 伺服器的連接。Web 伺服器以 SYN / ACK 進行回應，而 Client 端以 ACK(Acknowledgment field significant)進行確認。整個過程的總時間就是連接時間。
  • SSL 時間:Client 端主機和 Web 伺服器間進
    行 SSL 交握所花費的時間。
  • 等待時間:Client 端主機等待從Web伺服器
    接收訊息的時間。
  • 接收時間:Web 伺服器將所需訊息提供給
    Client 端所花費的時間。

在實際情況下，如果使用代理伺服器進行連 線。上述的整個過程將會重複進行。Client端通 過代理伺服器與 Web 伺服器建立連線。此時需 將額外花費時間納入考慮。

使用 Waterfall View 方式檢視 HAR

HTTP 存檔格式(HTTP Archive Format, HAR)可記錄、追踪瀏覽器與網站的互動。使 用 HAR 文件，可分析效能問題及頁面渲染等 問題，生成方式如下:

  • 如使用 Chrome，開起瀏覽器然後連到 Experitest 網站
  • 開啟 Chrome 設定 -> 更多工具
  • 選擇開發工具 -> 網路
  • 選擇保存日誌複選框，然後單擊錄製按鈕鈕
  • 選擇保存日誌複選框，然後單擊錄製按鈕
  • 錄製完成後，右鍵單擊並保存為帶有內容的 HAR

09 6HAR 文件如圖所示，視覺化 Experitest 網站 加載過程，可瞭解網站各項元件加載到螢幕 上所花費的時間。

2. 效能 – 使用者角度

使用者評估 App 效能可歸納成下列三個面 向:

  • 持續時間:有 50%的使用者對網站須耗費3 秒以上才能加載完成感覺厭惡。
  • 佔用資源:使用者會因 App 消耗更多資 源，如 CPU、儲存空間、電池和資料而卸
    載。
  • App Store:使用者會依據 App Store 評分判斷，五星往往是效能與使用者體驗優 良，故能吸引更多客戶使用。

專注於交易

交易是透過使用者介面觸發，向伺服器發送 請求並獲得回應的過程。從使用者角度來 看，交易所花費的時間很重要，以下是交易 的關鍵指標:

  • 持續時間:交易時間應盡可能短。
  • CPU/電池:盡可能降低 CPU 和電池消耗，可提高客戶體驗。
  • API 呼叫次數:API 呼叫次數保持最小並能同時執行很重要。
  • 下載資料:降低透過 REST API 下載圖像和影片，可提高交易效能。
  • 伺服器回應時間:伺服器回應 Client 端請求所花費的時間很重要。測量單位應為接 收第一位所花費的時間。

速度指數

使用者打開網站時，網路伺服器端會接受 到 Client 端的請求，便會回應所有網站的內 容。瀏覽器處理回應內容的時間會大大影響 使用者的體驗。換句話說，頁面加載時間會 影響應用程式效能。

如圖所示，A 網站加載需要 5 秒鐘，一次 性載入並顯示所有元素;B 網站加載需要 5 秒，但在開始的 2 秒內加載了 50%的頁面 元素，然後逐步加載其他元素。對使用者而 言，B 網站提供較良好的體驗。

09 7

在檢視頁面加載時間時，兩個網站在 1 秒後 處於相同的級別，但是 B 網站在下一秒躍升 到90%。

09 8

本文 (上篇) 分享了以不同層面探討 App 的效 能對使用者的影響，下篇我們將繼續探討企 業如何透過整合效能測試與 CI / CD 流程， 進而提供更完善的使用者體驗。