物聯網實訓系統前端組件化設計及優化

陳佳瀚，曾祥威，洪遠霖，李賢

（廣東工業大學信息工程學院，廣州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構建物聯網前端組件庫，通過組件復用的方式快速開發基礎實訓、智能家居、工業生產等多場景前端應用，提高實訓項目開發效率的同時，為學生、教師提供多元化的實訓交互界面。

同時，為進一步提升實訓應用使用體驗，從物聯網組件角度，提出一種針對大規模實訓組件的優化方法，實驗結果表明，所提方法在實訓組件渲染速度上表現出較好的性能，且組件數據越多，靜態組件性能提升幅度越大，有效降低前端渲染性能壓力，能滿足未來不斷擴展的實訓前端應用需求。