一種基于3D-GIS系統(tǒng)前端頁(yè)面的性能測(cè)試方法＊

王銀娟，臺(tái)憲青，馬治杰

（1.江蘇物聯(lián)網(wǎng)研究發(fā)展中心數(shù)據(jù)與服務(wù)研發(fā)中心，江蘇 無錫 214135；2.蘇州空天信息研究院，江蘇 蘇州 215121；3.中國(guó)科學(xué)院微電子研究所，北京 100000）

1 研究背景

隨著科學(xué)技術(shù)的快速發(fā)展，地理學(xué)的研究技術(shù)與方法日益現(xiàn)代化[1]。GIS即為地理信息系統(tǒng)（Geography Information System）縮寫，是一種特定的空間信息系統(tǒng)，是在計(jì)算機(jī)硬、軟件系統(tǒng)支持下，對(duì)整個(gè)或部分地球表層空間中有關(guān)地理分布數(shù)據(jù)進(jìn)行采集、儲(chǔ)存、管理、運(yùn)算、分析、顯示和描述的技術(shù)系統(tǒng)[2]。

GIS具有適應(yīng)性強(qiáng)、更新快、交互方便、強(qiáng)調(diào)數(shù)據(jù)管理能力等特點(diǎn)[3]。隨著三維技術(shù)概念及應(yīng)用的普及，三維地理信息系統(tǒng)概念被提出，由于3D相較于2D更能展現(xiàn)真實(shí)世界復(fù)雜的空間相位關(guān)系，因此，3D-GIS技術(shù)成為當(dāng)前空間領(lǐng)域發(fā)展的重要趨勢(shì)[4]。GIS應(yīng)用領(lǐng)域包括但不限于城市交通網(wǎng)絡(luò)[5]、旅游行業(yè)資源研究及應(yīng)用[6]、物聯(lián)網(wǎng)大數(shù)據(jù)等熱門領(lǐng)域，也是實(shí)施國(guó)家大數(shù)據(jù)戰(zhàn)略，加快完善數(shù)字基礎(chǔ)設(shè)施，推進(jìn)數(shù)據(jù)資源整合和開放共享，加快數(shù)字中國(guó)建設(shè)的重要一環(huán)。

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

2 前端性能測(cè)試流程

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

在進(jìn)行前端性能測(cè)試之前，測(cè)試組需根據(jù)所測(cè)項(xiàng)目進(jìn)行合理規(guī)劃，并確定測(cè)試流程。主要分為需求分析、工具調(diào)研及選擇、制定測(cè)試計(jì)劃、編寫測(cè)試場(chǎng)景、搭建測(cè)試環(huán)境、編寫測(cè)試腳本、執(zhí)行測(cè)試、記錄測(cè)試結(jié)果并進(jìn)行分析，最終，輸出測(cè)試報(bào)告[11]。

前端性能測(cè)試的每個(gè)階段都有測(cè)試環(huán)節(jié)與之對(duì)應(yīng)，如：需求分析需要產(chǎn)品需求規(guī)格說明書、測(cè)試腳本有軟件開發(fā)語(yǔ)言基礎(chǔ)等。具體如圖1所示。

圖1 前端性能測(cè)試流程圖

前端性能測(cè)試需求分析：性能需求分析是整個(gè)性能測(cè)試工作開展的基礎(chǔ)[12]。通過前端性能測(cè)試需求分析來評(píng)定測(cè)試對(duì)象及內(nèi)容，并評(píng)估可能存在的風(fēng)險(xiǎn)點(diǎn)，包括技術(shù)風(fēng)險(xiǎn)、時(shí)間風(fēng)險(xiǎn)等，進(jìn)行風(fēng)險(xiǎn)提前把控。

測(cè)試工具選型：根據(jù)所測(cè)項(xiàng)目的需求及所使用的技術(shù)框架，在確認(rèn)性能需求分析后，可按照具體需求分析選擇測(cè)試工具，合適的測(cè)試工具有利于提高測(cè)試效率和降低測(cè)試成本，該步對(duì)后續(xù)的流程進(jìn)行至關(guān)重要。

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

搭建測(cè)試環(huán)境：根據(jù)實(shí)際需求、測(cè)試工具進(jìn)行測(cè)試環(huán)境搭建，其中，包括測(cè)試工具安裝、系統(tǒng)配置等，確保所搭建環(huán)境可保證并滿足腳本編寫及正常執(zhí)行，該步驟要求測(cè)試人員具備一定的運(yùn)維知識(shí)。

編寫測(cè)試場(chǎng)景：根據(jù)項(xiàng)目實(shí)際需求分析和使用場(chǎng)景，羅列出測(cè)試要點(diǎn)，并生成相應(yīng)的測(cè)試場(chǎng)景，以便在編寫測(cè)試腳本時(shí)，進(jìn)行統(tǒng)一規(guī)劃。

編寫測(cè)試腳本：根據(jù)測(cè)試類型、測(cè)試場(chǎng)景、測(cè)試工具，選擇相適合的開發(fā)語(yǔ)言進(jìn)行腳本編寫，并在編寫過程中，需嚴(yán)格參照代碼編寫準(zhǔn)則，以便維護(hù)跟蹤。

實(shí)施測(cè)試：使用編寫好的測(cè)試腳本，按照測(cè)試場(chǎng)景執(zhí)行測(cè)試，并依據(jù)測(cè)試方案中確認(rèn)的性能指標(biāo)進(jìn)行數(shù)據(jù)收集。

記錄測(cè)試結(jié)果：通過測(cè)試，獲取相應(yīng)場(chǎng)景下的測(cè)試結(jié)果并進(jìn)行統(tǒng)一整理，形成相應(yīng)的文檔，以便測(cè)試分析。

編寫測(cè)試報(bào)告：根據(jù)整理的測(cè)試結(jié)果，進(jìn)行測(cè)試結(jié)果分析，形成測(cè)試報(bào)告。通過報(bào)告確認(rèn)系統(tǒng)是否存在瓶頸或異常等問題，將其反饋至相應(yīng)的開發(fā)負(fù)責(zé)人。通過性能調(diào)優(yōu)后，測(cè)試人員再次重復(fù)執(zhí)行實(shí)施測(cè)試階段，直至系統(tǒng)性能滿足產(chǎn)品需求。

3 前端頁(yè)面性能測(cè)試指標(biāo)

針對(duì)Web應(yīng)用系統(tǒng)，用戶在獲取一個(gè)頁(yè)面時(shí)，需經(jīng)歷如下過程：域名解析時(shí)間、TCP建立連接時(shí)間、HTTP請(qǐng)求響應(yīng)時(shí)間、響應(yīng)傳送時(shí)間、客戶端解析和響應(yīng)時(shí)間。每個(gè)階段的時(shí)間指標(biāo)均對(duì)前端頁(yè)面性能產(chǎn)生影響[14]。因此，對(duì)于常規(guī)的瀏覽器端的應(yīng)用，其前端頁(yè)面性能測(cè)試監(jiān)控指標(biāo)有很多，但重點(diǎn)關(guān)注有如下幾個(gè)方面。

頁(yè)面白屏?xí)r間：是指瀏覽器發(fā)出請(qǐng)求開始至用戶首次看到前端網(wǎng)頁(yè)有內(nèi)容的時(shí)間。

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

頁(yè)面加載完成時(shí)間：是指用戶從瀏覽器請(qǐng)求開始計(jì)時(shí)至前端頁(yè)面渲染完成的過程，即頁(yè)面加載完成時(shí)間，反映用戶的客觀響應(yīng)時(shí)間。

頁(yè)面DOM解析與構(gòu)建時(shí)間：是指瀏覽器開始對(duì)基礎(chǔ)頁(yè)文本內(nèi)容進(jìn)行解析到從文本中構(gòu)建出一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)（DOM樹）的時(shí)間。

FPS（流暢度）：幀率主要是體現(xiàn)在動(dòng)態(tài)頁(yè)面中，如視頻、動(dòng)畫效果，根據(jù)需求進(jìn)行重點(diǎn)關(guān)注并監(jiān)控，以免出現(xiàn)卡頓現(xiàn)象。

4 前端性能測(cè)試案例

由于3D-GIS產(chǎn)品的特殊性，該系統(tǒng)是基于三維地球模型開發(fā)的平臺(tái)，其前端需加載的數(shù)據(jù)量龐大，故對(duì)某域下的3D-GIS系統(tǒng)，客戶提出了相關(guān)性能指標(biāo)，如表1所示。文章以該3D-GIS信息系統(tǒng)中“粒子波動(dòng)”模塊為例，采用前端性能測(cè)試方法進(jìn)行實(shí)踐。

表1 系統(tǒng)性能測(cè)試指標(biāo)

4.1 測(cè)試工具選擇

目前，國(guó)內(nèi)主流的前端性能測(cè)試工具主要有l(wèi)ightHouse、Performance等，從不同角度對(duì)比了主流測(cè)試工具，分析其對(duì)3D-GIS信息系統(tǒng)進(jìn)行前端性能測(cè)試的支持分析情況，如表2所示。

表2 前端性能測(cè)試工具對(duì)比

表2中3種測(cè)試工具都可有效支持前端頁(yè)面性能測(cè)試。結(jié)合具體實(shí)踐項(xiàng)目來看，Puppeteer更適合作為3D-GIS系統(tǒng)的日常前端性能測(cè)試。文中將以Puppeteer為載體開展3D-GIS信息系統(tǒng)的前端頁(yè)面性能測(cè)試實(shí)踐。

4.2 環(huán)境搭建

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

至此，前端頁(yè)面性能測(cè)試環(huán)境基本上搭建完成，對(duì)于硬件配置，需根據(jù)實(shí)際測(cè)試對(duì)象及產(chǎn)品使用場(chǎng)景進(jìn)行適配。

4.3 測(cè)試場(chǎng)景及腳本編寫

場(chǎng)景：?jiǎn)斡脩臬@取3D-GIS信息系統(tǒng)前端頁(yè)面的性能指標(biāo)，通過測(cè)試腳本，直至運(yùn)行結(jié)束，其目的測(cè)試前端頁(yè)面性能指標(biāo)是否滿足要求。示例某一條測(cè)試用例描述，如表3所示。

表3 測(cè)試用例描述

表3（續(xù)）

如下為部分測(cè)試代碼：

async function SY（page）{

var Timing_SY_times={}

Timing_SY_times.loadPage=Timing_SY.loadEventEnd-T

iming_SY.navigationStart；

console.log（"頁(yè)面白屏?xí)r間："，

Timing_SY_times.loadPage，"ms"）

Timing_SY_times.domReady=Timing_SY.domComplete

-Timing_SY.responseEnd；

console.log（"頁(yè)面渲染時(shí)間：”，

Timing_SY_times.domReady，"ms"）}；

4.4 執(zhí)行結(jié)果與分析

根據(jù)4.3中的測(cè)試場(chǎng)景及用例，執(zhí)行腳本，得出測(cè)試結(jié)果，如圖2、圖3所示。

圖2 3D-GIS系統(tǒng)下前端頁(yè)面性能測(cè)試結(jié)果圖

圖3 3D-GIS系統(tǒng)下的FPS監(jiān)控結(jié)果圖

其中，從圖3可看出，粒子波動(dòng)模塊A下的FPS均在35幀/s上下浮動(dòng)，整體趨勢(shì)上下浮動(dòng)稍微偏大，且出現(xiàn)幀率小于30幀/s的現(xiàn)象，說明當(dāng)前頁(yè)面幀率不穩(wěn)定，也出現(xiàn)局部掉幀現(xiàn)象，分析其原因可能有測(cè)試機(jī)器配置的顯卡較低、網(wǎng)絡(luò)信號(hào)較差、前端數(shù)據(jù)處理技術(shù)不完善等。

因此，在實(shí)際測(cè)試過程中，需根據(jù)發(fā)現(xiàn)的問題及時(shí)與項(xiàng)目團(tuán)隊(duì)進(jìn)行反饋，必要時(shí)，需建議開發(fā)人員及時(shí)優(yōu)化性能指標(biāo)，直到滿足產(chǎn)品需求。

5 結(jié)論

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