物联网实训系统前端组件化设计及优化

陈佳瀚，曾祥威，洪远霖，李贤

（广东工业大学信息工程学院，广州510006）

0 引言

5G通信将大大加速物联网的发展，物联网领域人才需求迎来大幅度增长，物联网领域专业人才的培养变得更加重要。如何更好地培养学生的专业物联网应用技能、充分发挥学生的实际动手能力，这是目前需要解决的关键问题［1－3］。过去传统物联网实训方式主要是课堂讲解配合实训箱实操，让学生动手操作配置各种物联网设备，完成末端设备的互联互通，并且根据固定物联网场景实现简单的设备联动等。

为实现更好的物联网教学实训效果，近年来已有基于不同软硬件平台的实训系统开发方案［4－6］，通过传统嵌入式开发的方式实现了物联网实训系统，但仍存在以下问题：

（1）应用层开发复杂度高：采用传统嵌入式模式开发的实训系统耦合度高，开发人员必须兼顾物联网感知层和实训应用层的开发。感知层物联网设备千差万别，底层协议也各不相同，同时应用层开发涉及与硬件开发不同的开发语言和技术栈，增加了系统前期的开发成本和后期的维护成本。

基于Web服务的物联网系统（Web of Things，WoT）［7－8］，可用于解决以上问题。与传统IoT系统不同，WoT可以利用Web标准快速互联生态系统中的嵌入式设备，此外，Web应用具备跨平台优势，可方便地运行在多平台浏览器中，可以方便用户使用多终端物联网应用。而对于开发者来说，前端框架Vue、React的出现，让物联网Web应用具备更丰富的交互功能，并且易于开发维护，非常适合应用于物联网系统开发中。按照Web开发中的前后端定义，本文将物联网应用层相关模块称为“前端”，将网络层相关模块称为“后端”。

如图1所示，在分析物联网实训系统各部分功能与特点的基础上，考虑到感知层实训设备的资源受限性和后期的扩展性等因素［9－12］，本文采用基于表述性状态传递（Representational State Transfer，REST）风格的Web物联网软件开发体系，将感知层实训设备和应用层实训应用互联起来，构建物联网实训系统。

图1 物联网实训系统架构对比

对比传统物联网实训系统，主要特点有：

（1）前后端分离开发：通过前后端分离的开发模式，使实训系统实现开发解耦。前端开发人员专注于各种物联网实训场景的交互呈现，后端开发人员可专注于解决物联网感知层的数据接入问题，互不干扰，可实现并行开发。

（2）组件库设计：前端基于Vue构建物联网实训组件库，通过组件复用的方式，实现基础实训、智能家居、工业生产等多场景实训项目的快速开发，解决应用层开发复杂度高的问题。

（3）渲染性能优化：为减轻浏览器压力，提升实训应用使用体验，提出一种针对高渲染负荷实训场景的前端性能优化方法，通过数据冻结的方式，提升实训应用在大规模结点场景下的前端性能表现，解决传统实训应用体验不佳的问题。

1 前后端分离结构设计

早期的Web开发以服务端渲染模式（Server-Side Rendering，SSR）为主，即客户端HTML页面是由后端服务器进行渲染。服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。当Web应用需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端。通过以上流程渲染完成的页面，不需要单独加载额外文件，可直接发送到客户端（浏览器）进行展示。然而，在开发阶段，整个页面的模块由后端人员负责开发、维护，在面对复杂的业务需求时，增加了系统的开发成本。同时，客户端（前端）人员在进行页面开发时，需要通过PHP和Java等不同开发技术来编写页面代码，增加了系统开发的难度。此外，系统代码数据与业务逻辑耦合度较高，不利于实训系统后期的扩展和维护。

袁传璋之推算固亦准《博物志》，但脱开《博物志》，其所推算亦能成立。人或以为袁氏“基点”说不能成立，其实这不过是找个支点，也无可无不可，我们觉得找一个“支点”或云“基点”，还是可以展开司马迁生年的探讨的。

为此，本文基于前后端分离模式构建单页面富应用（Single Page Application，SPA）。如图2所示，区别于服务端渲染，前后端分离结构［13］最大的特点是实现了开发解耦。对于物联网Web应用开发来说，前端开发人员可以专注于各种物联网场景的交互实现，后端开发人员可以专注于解决物联网感知层的数据接入问题，实现并行开发。

图2 物联网实训系统总体架构

前端方面，即实训系统应用层，利用前端框架Vue构建物联网组件库，通过前端路由管理器（Vue Router）进行细粒度的导航控制，灵活地管理前端UI组件，实现更复杂的页面交互效果。同时利用前端开发活跃的组件生态，可将数据可视化等技术引入实训系统中，提升物联网实训课程的教学效果。

后端方面，得益于该模式的松耦合性和灵活性，后端可选择统一Web技术栈构建实训系统后端服务器［14］。后端基于Node.js的Web开发框架Express构建物联网中间件服务器，除数据存储外，为前端实训应用提供JSON格式的数据接口服务。通过异步请求框架Axios（HTTP库），实训前端应用开发者可以很方便地调用后端接口，从而专注于实训页面业务实现，有效提高物联网实训应用的开发效率。

2 前端组件库设计及应用

2.1 前端组件需求分析

实训系统需要支持物联网实践教学，将实训设备的控制处理与实际实训项目进行一一对应，提供从物联网基础、物联网办公应用到物联网生产典型应用实训的课程内容，设备功能配置具有开放性，同时便于学生动手实践。整体功能树如图3所示，物联网实训系统Web应用主要分为三大模块：后台管理模块、实训模块（学生端）、实训模块（教师端）。

图3 实训系统前端功能模块设计

重点对平台整体进行功能粗粒度分类，如表1所示，通过分析各个模块功能重复情况，结合功能需求等级，整理出实训系统功能需求等级分布情况。其中实训模块（学生端）为核心功能模块，包含基础实训应用、智能家居、工业生产三大实训应用场景，涉及设备数据可视化、实时交互、设备拓扑结构展示等实训功能。

表1 实训系统功能需求等级分布情况（＋代表需求等级低、＋＋代表中等、＋＋＋代表高）

2.2 物联网实训组件库应用

由表1分析可知，实训模块（学生端）涉及功能复杂，且不同场景下存在较多相似功能模块。本文基于Vue构建实训系统SPA应用，在前端设计物联网组件库，根据不同实训场景，将页面结构、功能模块拆分成多个子组件，组件与组件之间相互独立，也可相互嵌入，分别进行针对性开发，以此实现模块复用，解决应用层开发效率低等问题。

如图4所示，以“基础实训3-ZigBee的综合应用实训”为例，根据基础实训功能需要，将实训页面拆分以下主要功能模块：①主题信息组件：展示当前实训课程基本情况，包含操作台编号、小组人数、实训时间、授课教师等基本信息；②操作台组件：根据当前实训课程网络拓扑图，提供可交互的可视化操作台，直观展示当前操作台设备连接情况；③设备参数组件：学生完成设备基本配置后，可点击按钮获取感知层设备详细信息；④网络架构组件：简要展示实训设备网络架构图。最后，通过主文件index.vue可以灵活地引入以上子组件。

图4 基础实训Web应用功能模块拆分

图4中，（1）主题信息组件，（2）操作台组件，（3）设备参数组件，（4）网络架构组件，以下类同。

利用已有统一实训组件，可以高效率地开发出其他实训课程应用页面。如图5、图6所示，智能家居实训与工业生产实训基本页面功能相似，因此可基于上述可视化操作台等组件进行二次开发，快速拓展出其他实训场景，避免重复开发，提升开发效率。

图5 智能家居实训功能实现

图6 工业生产实训功能实现

此外，前端可以通过引入第三方库的方式，构建公共功能组件库。如图7所示，通过物联网组件库和第三方组件库组合，可以快速完成课堂管理和设备管理等功能模块。随着物联网组件库的不断丰富，后期可以满足更多类型、更加复杂的实训场景应用需求。

图7 实训系统部分功能实现（教师端）

3 前端渲染性能优化

3.1 优化背景及原理

SPA将服务器端的页面渲染逻辑和业务控制逻辑提前到浏览器层级上，减轻了服务器的压力，加强了前端的异步展示的能力，同时也将前端渲染压力放在了本地浏览器上。随着物联网实训场景的丰富，前端实训应用交互会变得更加复杂，在硬件性能不高的终端上，会造成页面渲染缓慢，甚至浏览器崩溃的问题。

为了同时兼顾开发效率与Web前端性能问题，各个主流开发框架相继推出了性能瓶颈优化方案，其核心为Diff算法的应用［15－16］。改进Diff算法可以提升前端性能，但随着开发框架的更迭，Vue融合了snabbdom库等其他优秀改进算法，性能表现已十分出众，因此改进Diff算法提升有限。此外，改进Diff算法需改动框架源码，无法针对特定前端组件进行优化，灵活度低，针对性较差。

针对以上情况，本文从物联网组件角度，提出一种针对物联网实训组件的性能优化方法：组件库开发前，在数据展示需求层面，首先对物联网组件进行分类，将其分为常规组件和静态组件。将需要大数据量展示的组件定义为静态组件，然后通过Object.freeze（）方法，将静态组件进行数据冻结。

优化原理：如图8所示，在进行页面开发时，Vue默认会对每个数组数据的每一层属性，添加双向数据绑定机制，实现动态响应效果。组件数组对象越大，双向数据绑定耗时越多，而利用Object.freeze（）数据冻结的方法可以避免双向绑定，减少页面整体渲染耗时，提升性能表现。物联网应用中经常存在信息展示场景，如实训应用中的网络架构组件等，因此，可利用以上方法进行渲染性能优化，改善前端实训应用使用体验。

图8 组件优化主要流程

3.2 实验分析

实验工具为Chrome浏览器87.0.4280版本，Vue版本为2.5.2。通过Chrome开发者工具搭建组件性能测试平台，对常规组件，静态组件进行性能测试。首先使用它们生成一定数据量的列表，以此模拟不同渲染压力下的组件场景，最后记录并分析每组实验中两者的初次渲染时间。测试分为横向测试和纵向测试，横向测试用作对比同一数据规模下两者的性能优劣，纵向测试用作对比不同数据规模下的性能差异。

如图9所示，在初次渲染500行列表时，常规组件平均耗时41.1 ms，静态组件平均耗时22.3 ms，静态组件实验表现更佳。

图9 横向对比结果（渲染500行列表）

如图10所示，在初次渲染1000行列表时，常规组件平均耗时52.7 ms，静态组件平均耗时36.8 ms，提升幅度约为30.1%；初次渲染10000行列表时，常规组件平均耗时364.6 ms，静态组件平均耗时232.6 ms，提升幅度约为36.2%。综合多次实验数据可得，处理数据越多，静态组件性能表现越好，验证了经数据冻结的静态组件可以减少浏览器渲染时长，有助于提升物联网实训组件性能，提升前端实训应用使用体验。

图10 纵向对比结果（渲染1000至10000行列表）

4 结语

区别于传统嵌入式物联网实训系统，本文针对实训系统应用层的需求特点，提出一种基于Web的物联网实训系统开发方案，其核心思想是：基于前后端分离的开发架构，利用Vue构建物联网前端组件库，通过组件复用的方式快速开发基础实训、智能家居、工业生产等多场景前端应用，提高实训项目开发效率的同时，为学生、教师提供多元化的实训交互界面。

同时，为进一步提升实训应用使用体验，从物联网组件角度，提出一种针对大规模实训组件的优化方法，实验结果表明，所提方法在实训组件渲染速度上表现出较好的性能，且组件数据越多，静态组件性能提升幅度越大，有效降低前端渲染性能压力，能满足未来不断扩展的实训前端应用需求。