一種基于3D-GIS系統前端頁面的性能測試方法＊

王銀娟，臺憲青，馬治杰

（1.江蘇物聯網研究發展中心數據與服務研發中心，江蘇 無錫 214135；2.蘇州空天信息研究院，江蘇 蘇州 215121；3.中國科學院微電子研究所，北京 100000）

1 研究背景

隨著科學技術的快速發展，地理學的研究技術與方法日益現代化[1]。GIS即為地理信息系統（Geography Information System）縮寫，是一種特定的空間信息系統，是在計算機硬、軟件系統支持下，對整個或部分地球表層空間中有關地理分布數據進行采集、儲存、管理、運算、分析、顯示和描述的技術系統[2]。

GIS具有適應性強、更新快、交互方便、強調數據管理能力等特點[3]。隨著三維技術概念及應用的普及，三維地理信息系統概念被提出，由于3D相較于2D更能展現真實世界復雜的空間相位關系，因此，3D-GIS技術成為當前空間領域發展的重要趨勢[4]。GIS應用領域包括但不限于城市交通網絡[5]、旅游行業資源研究及應用[6]、物聯網大數據等熱門領域，也是實施國家大數據戰略，加快完善數字基礎設施，推進數據資源整合和開放共享，加快數字中國建設的重要一環。

3D-GIS產品是一個綜合性的研究領域，包括了計算機圖形技術、三維可視化技術、空間數據結構技術以及三維空間交互與分析技術等多項技術[7]。因此，在對3D-GIS產品進行測試過程中，對其功能、性能測試要求均較高，尤其是高程渲染、專題圖加載播放等模塊，其性能指標并非為常規指標項，例如：頁面渲染，常規的性能測試方法無法滿足測試需求，故需采用一種前端性能測試技術來獲取頁面渲染響應時間、幀數變化等指標信息。

2 前端性能測試流程

隨著前端技術不斷發展和Web應用的復雜化、Web站點形式和功能的多樣化，Web應用正在往兼容多終端、高性能方向發展，常規靜態頁面已無法滿足需求，為解決Web性能的組件化開發，提升前后端的開發效率，故推出了前后端相分離技術[8]。針對前端性能優化，其方法有很多，例如：2016年孔令旭[9]提出了一種基于Node.js實現的前后端分離的解決方法，并證明了其在性能方面的高效性。要想解決前端性能優化，必須要先進行性能測試，其中，軟件性能測試是評測軟件功能、檢測計算機與軟件兼容性的主要方式[10]。通過前端性能測試方法定位前端性能瓶頸，方可解決上述問題，故下面重點介紹關于前端頁面性能測試的內容。

在進行前端性能測試之前，測試組需根據所測項目進行合理規劃，并確定測試流程。主要分為需求分析、工具調研及選擇、制定測試計劃、編寫測試場景、搭建測試環境、編寫測試腳本、執行測試、記錄測試結果并進行分析，最終，輸出測試報告[11]。

前端性能測試的每個階段都有測試環節與之對應，如：需求分析需要產品需求規格說明書、測試腳本有軟件開發語言基礎等。具體如圖1所示。

圖1 前端性能測試流程圖

前端性能測試需求分析：性能需求分析是整個性能測試工作開展的基礎[12]。通過前端性能測試需求分析來評定測試對象及內容，并評估可能存在的風險點，包括技術風險、時間風險等，進行風險提前把控。

測試工具選型：根據所測項目的需求及所使用的技術框架，在確認性能需求分析后，可按照具體需求分析選擇測試工具，合適的測試工具有利于提高測試效率和降低測試成本，該步對后續的流程進行至關重要。

制定測試方案：在明確前端性能測試需求及工具后，需根據實際情況進行設計測試方案，包含測試計劃。該步驟主要是對項目進行總體考慮，如測試對象、測試目的和范圍等各方面內容[13]。

搭建測試環境：根據實際需求、測試工具進行測試環境搭建，其中，包括測試工具安裝、系統配置等，確保所搭建環境可保證并滿足腳本編寫及正常執行，該步驟要求測試人員具備一定的運維知識。

編寫測試場景：根據項目實際需求分析和使用場景，羅列出測試要點，并生成相應的測試場景，以便在編寫測試腳本時，進行統一規劃。

編寫測試腳本：根據測試類型、測試場景、測試工具，選擇相適合的開發語言進行腳本編寫，并在編寫過程中，需嚴格參照代碼編寫準則，以便維護跟蹤。

實施測試：使用編寫好的測試腳本，按照測試場景執行測試，并依據測試方案中確認的性能指標進行數據收集。

記錄測試結果：通過測試，獲取相應場景下的測試結果并進行統一整理，形成相應的文檔，以便測試分析。

編寫測試報告：根據整理的測試結果，進行測試結果分析，形成測試報告。通過報告確認系統是否存在瓶頸或異常等問題，將其反饋至相應的開發負責人。通過性能調優后，測試人員再次重復執行實施測試階段，直至系統性能滿足產品需求。

3 前端頁面性能測試指標

針對Web應用系統，用戶在獲取一個頁面時，需經歷如下過程：域名解析時間、TCP建立連接時間、HTTP請求響應時間、響應傳送時間、客戶端解析和響應時間。每個階段的時間指標均對前端頁面性能產生影響[14]。因此，對于常規的瀏覽器端的應用，其前端頁面性能測試監控指標有很多，但重點關注有如下幾個方面。

頁面白屏時間：是指瀏覽器發出請求開始至用戶首次看到前端網頁有內容的時間。

頁面渲染時間：是指瀏覽器首次加載內容開始至頁面全部展示，其過程包括DOM樹、CSS樣式等處理至屏幕全部正確展示，該值為前端性能優劣的重要指標之一。

頁面加載完成時間：是指用戶從瀏覽器請求開始計時至前端頁面渲染完成的過程，即頁面加載完成時間，反映用戶的客觀響應時間。

頁面DOM解析與構建時間：是指瀏覽器開始對基礎頁文本內容進行解析到從文本中構建出一個內部數據結構（DOM樹）的時間。

FPS（流暢度）：幀率主要是體現在動態頁面中，如視頻、動畫效果，根據需求進行重點關注并監控，以免出現卡頓現象。

4 前端性能測試案例

由于3D-GIS產品的特殊性，該系統是基于三維地球模型開發的平臺，其前端需加載的數據量龐大，故對某域下的3D-GIS系統，客戶提出了相關性能指標，如表1所示。文章以該3D-GIS信息系統中“粒子波動”模塊為例，采用前端性能測試方法進行實踐。

表1 系統性能測試指標

4.1 測試工具選擇

目前，國內主流的前端性能測試工具主要有lightHouse、Performance等，從不同角度對比了主流測試工具，分析其對3D-GIS信息系統進行前端性能測試的支持分析情況，如表2所示。

表2 前端性能測試工具對比

表2中3種測試工具都可有效支持前端頁面性能測試。結合具體實踐項目來看，Puppeteer更適合作為3D-GIS系統的日常前端性能測試。文中將以Puppeteer為載體開展3D-GIS信息系統的前端頁面性能測試實踐。

4.2 環境搭建

確定測試工具后，則可搭建測試環境，主要操作有：安裝Node.js和Npm；檢查Node.js、Npm是否安裝成功并集成；安裝Chromium、Puppeteer；安裝編譯工具，如Visual studio code。

至此，前端頁面性能測試環境基本上搭建完成，對于硬件配置，需根據實際測試對象及產品使用場景進行適配。

4.3 測試場景及腳本編寫

場景：單用戶獲取3D-GIS信息系統前端頁面的性能指標，通過測試腳本，直至運行結束，其目的測試前端頁面性能指標是否滿足要求。示例某一條測試用例描述，如表3所示。

表3 測試用例描述

表3（續）

如下為部分測試代碼：

async function SY（page）{

var Timing_SY_times={}

Timing_SY_times.loadPage=Timing_SY.loadEventEnd-T

iming_SY.navigationStart；

console.log（"頁面白屏時間："，

Timing_SY_times.loadPage，"ms"）

Timing_SY_times.domReady=Timing_SY.domComplete

-Timing_SY.responseEnd；

console.log（"頁面渲染時間：”，

Timing_SY_times.domReady，"ms"）}；

4.4 執行結果與分析

根據4.3中的測試場景及用例，執行腳本，得出測試結果，如圖2、圖3所示。

圖2 3D-GIS系統下前端頁面性能測試結果圖

圖3 3D-GIS系統下的FPS監控結果圖

其中，從圖3可看出，粒子波動模塊A下的FPS均在35幀/s上下浮動，整體趨勢上下浮動稍微偏大，且出現幀率小于30幀/s的現象，說明當前頁面幀率不穩定，也出現局部掉幀現象，分析其原因可能有測試機器配置的顯卡較低、網絡信號較差、前端數據處理技術不完善等。

因此，在實際測試過程中，需根據發現的問題及時與項目團隊進行反饋，必要時，需建議開發人員及時優化性能指標，直到滿足產品需求。

5 結論

文中結合GIS領域的前沿發展及前端性能測試現狀，分別介紹了前端性能測試的必要性、測試流程及測試工具的選擇，并結合實際項目中3D-GIS信息系統的“粒子波動”模塊開展前端頁面性能測試的實踐。通過對前端頁面白屏時間、渲染時間、動畫畫面幀數監控測試，得出當前系統的FPS不滿足產品性能要求的結論，為前端開發人員提供有價值的參考依據等，若在實際工作過程中，需使用文中介紹的方法進行測試，則需要軟件測試人員具備一定的編程能力，故測試人員要不斷提升代碼編寫開發能力。