一种基于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不满足产品性能要求的结论，为前端开发人员提供有价值的参考依据等，若在实际工作过程中，需使用文中介绍的方法进行测试，则需要软件测试人员具备一定的编程能力，故测试人员要不断提升代码编写开发能力。