文章编号：2095－6835（2022）10－0025－04
一种基于3D-GIS系统前端页面的性能测试方法＊
王银娟1，台宪青2，马治杰3
（1.江苏物联网研究发展中心数据与服务研发中心，江苏无锡214135；2.苏州空天信息研究院，江苏苏州215121；
3.中国科学院微电子研究所，北京100000）
摘要：目前，随着计算机技术的不断改进，计算机软件产品的质量要求也越来越高，尤其是软件产品的性能方面。传统的软件性能测试方法仅能获取所测系统的前端事务响应时间等常规指标，却无法获取所测系统的前端页面渲染等性能指标数据，故引出了软件系统前端页面性能测试。通过采用开源的Puppeteer前端页面性能测试方法，解决了传统的测试方法无法获取非常规的软件性能测试指标，该方法不仅可精确获取所测系统的前端页面渲染时间等非常规指标，还有利于开发人员对系统前端页面性能测试结果进行详细分析，快速确定所测系统的前端性能瓶颈位置，进行系统性能优化，更能节省资源开销，提高所测产品的交付质量。
关键词：3D-GIS；性能测试；前端页面；测试方法
中图分类号：TP311文献标志码：A DOI：10.15913/jki.kjycx.2022.10.008
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]。
前端性能测试的每个阶段都有测试环节与之对应，如：需求分析需要产品需求规格说明书、测试脚
——————————————————————————
＊［基金项目］中国科学院战略性先导科技专项（A类）（编号：XDA19080201）
·25·
·26·
本有软件开发语言基础等。具体如图1
所示。
图1前端性能测试流程图
前端性能测试需求分析：性能需求分析是整个性能测试工作开展的基础[12]。通过前端性能测试需求分析来评定测试对象及内容，并评估可能存在的风险点，包括技术风险、时间风险等，进行风险提前把控。
测试工具选型：根据所测项目的需求及所使用的技术框架，在确认性能需求分析后，可按照具体需求分析选择测试工具，合适的测试工具有利于提高测试效率和降低测试成本，该步对后续的流程进行至关重要。
制定测试方案：在明确前端性能测试需求及工具后，需根据实际情况进行设计测试方案，包含测试计划。该步骤主要是对项目进行总体考虑，如测试对象、测试目的和范围等各方面内容[13]。
搭建测试环境：根据实际需求、测试工具进行测试环境搭建，其中，包括测试工具安装、系统配置等，确保所搭建环境可保证并满足脚本编写及正常执行，该步骤要求测试人员具备一定的运维知识。
编写测试场景：根据项目实际需求分析和使用场景，罗列出测试要点，并生成相应的测试场景，以便在编写测试脚本时，进行统一规划。
编写测试脚本：根据测试类型、测试场景、测试工具，选择相适合的开发语言进行脚本编写，并在编写过程中，需严格参照代码编写准则，以便维护跟踪。
实施测试：使用编写好的测试脚本，按照测试场景执行测试，并依据测试方案中确认的性能指标进行数据收集。
记录测试结果：通过测试，获取相应场景下的测试结果并进行统一整理，形成相应的文档，以便测试分析。
编写测试报告：根据整理的测试结果，进行测试结果分析，形成测试报告。通过报告确认系统是否存在瓶颈或异常等问题，将其反馈至相应的开发负责人。通过性能调优后，测试人员再次重复执行实施测试阶段，直至系统性能满足产品需求。3
前端页面性能测试指标
针对Web 应用系统，用户在获取一个页面时，需经历如下过程：域名解析时间、TCP 建立连接时间、HTTP 请求响应时间、响应传送时间、客户端解析和响应时间。每个阶段的时间指标均对前端页面性能产生影响[14]。因此，对于常规的浏览器端的应用，其前端页面性能测试监控指标有很多，但重点关注有如下几个方面。
页面白屏时间：是指浏览器发出请求开始至用户首次看到前端网页有内容的时间。
页面渲染时间：是指浏览器首次加载内容开始至
页面全部展示，其过程包括DOM 树、CSS 样式等处理至屏幕全部正确展示，该值为前端性能优劣的重要指标之一。
页面加载完成时间：是指用户从浏览器请求开始计时至前端页面渲染完成的过程，即页面加载完成时间，反映用户的客观响应时间。
页面DOM 解析与构建时间：是指浏览器开始对基础页文本内容进行解析到从文本中构建出一个内部数据结构（DOM 树）的时间。
FPS （流畅度）：帧率主要是体现在动态页面中，如视频、动画效果，根据需求进行重点关注并监控，以免出现卡顿现象。4
前端性能测试案例
由于3D-GIS 产品的特殊性，该系统是基于三维地球模型开发的平台，其前端需加载的数据量庞大，故对某域下的3D-GIS 系统，客户提出了相关性能指标，如表1所示。文章以该3D-GIS 信息系统中“粒子波动”模块为例，采用前端性能测试方法进行实践。
表1系统性能测试指标
测试指标名称说明
页面白屏时间粒子波动页面白屏等待不超过1s 页面渲染时间粒子波动页面渲染不超过3s
页面FPS
粒子波动页面中的动态画面对应FPS 不低于30帧/s
前端测试和后端测试的区别
4.1测试工具选择
目前，国内主流的前端性能测试工具主要有lightHouse、Performance等，从不同角度对比了主流测试工具，分析其对3D-GIS信息系统进行前端性能测试的支持分析情况，如表2所示。
表2前端性能测试工具对比
对比Performance lightHouse Puppeteer
状态在线实时
监控
在线实时
线下人工编写测试
脚本，是一个
Node.js库
特点Chrome插件
工具，依赖
产品使用谷
歌浏览器
Chrome扩展
程序，依赖产
品使用谷歌
浏览器
调用浏览器的API
来操纵Web
内容网页性能
指标的实时
监控
网站整体评估
从网站抓取内容，
且可模拟界面操作
模拟
结果实时监控当
前网页的
CPU、内存使
用率并展示
收集关于开
发人员最佳
实践的性能
指标
收集页面时间参
数，并进行时间计
算，获取相应的前
端页面性能指标
优缺点测试结果无
法保存并线
下分析
测试结果不
直观
测试结果可保存并
进行线下分析
表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测试用例描述
用例名称粒子波动模块
操作1.在3D-GIS信息产品系统下点击“粒子波动”直至正确展示；
2.监控页面中的动态画面的帧数变化
场景设计1.设计编写测试脚本；
2.设定所要监控的性能指标；
表3（续）
用例名称粒子波动模块
场景设计
3.完成前一直运行；
4.运行场景
预期结果
1.页面白屏小于2s；
2.界面渲染小于3s；
3.获取FPS值小于等于30帧/s
如下为部分测试代码：
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
-sponseEnd；
console.log（"页面渲染时间：”，
Timing_SY_times.domReady，"ms"）}；
4.4执行结果与分析
根据4.3中的测试场景及用例，执行脚本，得出测
试结果，如图2、图3所示。
图23D-GIS系统下前端页面性能测试结果图
图33D-GIS系统下的FPS监控结果图
其中，从图3可看出，粒子波动模块A下的FPS
均在35帧/s上下浮动，整体趋势上下浮动稍微偏大，
且出现帧率小于30帧/s的现象，说明当前页面帧率不
稳定，也出现局部掉帧现象，分析其原因可能有
测试机器配置的显卡较低、网络信号较差、前端数据
处理技术不完善等。
因此，在实际测试过程中，需根据发现的问题及
响
应
时
间/
s
F
P
S
/
（
帧·
s
-
1
）
·27·
时与项目团队进行反馈，必要时，需建议开发人员及时优化性能指标，直到满足产品需求。
5结论
文中结合GIS领域的前沿发展及前端性能测试现状，分别介绍了前端性能测试的必要性、测试流程及测试工具的选择，并结合实际项目中3D-GIS信息系统的“粒子波动”模块开展前端页面性能测试的实践。通过对前端页面白屏时间、渲染时间、动画画面帧数监控测试，得出当前系统的FPS不满足产品性能要求的结论，为前端开发人员提供有价值的参考依据等，若在实际工作过程中，需使用文中介绍的方法进行测试，则需要软件测试人员具备一定的编程能力，故测试人员要不断提升代码编写开发能力。
参考文献：
［1］黄靖，袁金国，王娅静.地理信息技术在中学地理教学中应用研究综述［J］.信息与电脑（理论版），
2020，32（22）：246-248.
［2］应申，郭仁忠，李霖.应用3DGIS实现三维地籍：实践与挑战［J］.测绘地理信息，2018，43（2）：1-6.［3］黄瑜，刘佩诗，甘曼琴，等.GIS技术在农业面源污染研究中的应用［J］.中国土壤与肥料，2020
（6）：279-285.
［4］邵美玲.基于3D GIS的区域认知教材分析及教学模式构建——以人教版高中地理必修Ⅲ为例［D］.
信阳：信阳师范学院，2020.
［5］余泽健.基于GIS的城市交通网络可达性与分形特征研究［D］.西安：长安大学，2020.
［6］王英杰，张桐艳，，等.GIS在中国旅游资源
研究与应用中的现状及趋势［J］.地球信息科学
学报，2020，22（4）：751-759.
［7］赵中元.大城市三维地理信息系统关键技术［D］.
武汉：武汉大学，2011.
［8］杜艳美.基于web前端的性能优化框架模型研究［D］.绵阳：西南科技大学，2015.
［9］孔令旭.基于Node.js的前后端分离框架的实现与应用［D］.武汉：华中科技大学，2016.
［10］李睿.关于软件性能测试解析与优化研究［J］.
信息系统工程，2015（10）：28-29.
［11］严强强，马骏，夏迎舟.基于Jmeter的指挥信息系统软件性能测试研究［J］.信息化研究，2020，
46（2）：74-78.
［12］姚彬彬.确定软件性能测试性能需求的方法［J］.
信息与电脑，2016（5）：92-93.
［13］郭旭敏，王小厅.LoadRunner在软件性能测试中的应用与研究［J］.太原学院学报（自然科学版），
2018，36（3）：32-35.
［14］李晓峰.Web工程前端性能优化［J］.电子科技，2015，28（5）：184-186.————————
作者简介：王银娟（1988—），女，江苏无锡人，硕士，中级职称，研究方向为软件测试开发。马治杰（1987—），男，河南郑州人，博士，助理研究员，研究方向为物联网与大数据。
通讯作者：台宪青（1966—），男，北京人，博士，研究员，研究方向为大数据与信息安全。
〔编辑：张超〕
————————————————————————————————————————————————（上接第19页）
［6］田蕾.创新创业能力培养视角下的大学生就业指导模式构建［J］.领导科学论坛，2018（3）：61-63.［7］谢华.基于创新创业能力培养视角的大学生就业指导模式研究［J］.智库时代，2019（40）：54-55.作者简介：徐国庆（1981—），男，博士研究生，讲师，研究方向为全球价值链分工。周明（1975—），男，博士研究生，教授，研究方向为技术创新。曹静（2000—），女，本科，研究方向为大学生就业。
〔编辑：张超〕
—
———————————————————————————————————————————————（上接第24页）
的京津冀区域逐日气温格点数据集建立方法研究［J］.海洋气象学报，2020，40（3）：111-120.［15］易桂花，张廷斌，何奕萱，等.四种气温空间插值方法适用性分析［J］.成都理工大学学报（自
然科学版），2020，47（1）：115-128.
［16］陆福志，鹿化煜.秦岭—大巴山高分辨率气温和
降水格点数据集的建立及其对区域气候的指示［J］.地理学报，2019，74（5）：875-888.————————
作者简介：卫倩倩（1988—），女，大学本科，工程师，研究方向为气象数据质量控制与空间插值技术。
〔编辑：丁琳〕
·28·

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。