陳佳瀚，曾祥威，洪遠(yuǎn)霖，李賢

（廣東工業(yè)大學(xué)信息工程學(xué)院，廣州510006）

0 引言

5G通信將大大加速物聯(lián)網(wǎng)的發(fā)展，物聯(lián)網(wǎng)領(lǐng)域人才需求迎來大幅度增長，物聯(lián)網(wǎng)領(lǐng)域?qū)I(yè)人才的培養(yǎng)變得更加重要。如何更好地培養(yǎng)學(xué)生的專業(yè)物聯(lián)網(wǎng)應(yīng)用技能、充分發(fā)揮學(xué)生的實(shí)際動(dòng)手能力，這是目前需要解決的關(guān)鍵問題［1－3］。過去傳統(tǒng)物聯(lián)網(wǎng)實(shí)訓(xùn)方式主要是課堂講解配合實(shí)訓(xùn)箱實(shí)操，讓學(xué)生動(dòng)手操作配置各種物聯(lián)網(wǎng)設(shè)備，完成末端設(shè)備的互聯(lián)互通，并且根據(jù)固定物聯(lián)網(wǎng)場景實(shí)現(xiàn)簡單的設(shè)備聯(lián)動(dòng)等。

為實(shí)現(xiàn)更好的物聯(lián)網(wǎng)教學(xué)實(shí)訓(xùn)效果，近年來已有基于不同軟硬件平臺(tái)的實(shí)訓(xùn)系統(tǒng)開發(fā)方案［4－6］，通過傳統(tǒng)嵌入式開發(fā)的方式實(shí)現(xiàn)了物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)，但仍存在以下問題：

（1）應(yīng)用層開發(fā)復(fù)雜度高：采用傳統(tǒng)嵌入式模式開發(fā)的實(shí)訓(xùn)系統(tǒng)耦合度高，開發(fā)人員必須兼顧物聯(lián)網(wǎng)感知層和實(shí)訓(xùn)應(yīng)用層的開發(fā)。感知層物聯(lián)網(wǎng)設(shè)備千差萬別，底層協(xié)議也各不相同，同時(shí)應(yīng)用層開發(fā)涉及與硬件開發(fā)不同的開發(fā)語言和技術(shù)棧，增加了系統(tǒng)前期的開發(fā)成本和后期的維護(hù)成本。

基于Web服務(wù)的物聯(lián)網(wǎng)系統(tǒng)（Web of Things，WoT）［7－8］，可用于解決以上問題。與傳統(tǒng)IoT系統(tǒng)不同，WoT可以利用Web標(biāo)準(zhǔn)快速互聯(lián)生態(tài)系統(tǒng)中的嵌入式設(shè)備，此外，Web應(yīng)用具備跨平臺(tái)優(yōu)勢(shì)，可方便地運(yùn)行在多平臺(tái)瀏覽器中，可以方便用戶使用多終端物聯(lián)網(wǎng)應(yīng)用。而對(duì)于開發(fā)者來說，前端框架Vue、React的出現(xiàn)，讓物聯(lián)網(wǎng)Web應(yīng)用具備更豐富的交互功能，并且易于開發(fā)維護(hù)，非常適合應(yīng)用于物聯(lián)網(wǎng)系統(tǒng)開發(fā)中。按照Web開發(fā)中的前后端定義，本文將物聯(lián)網(wǎng)應(yīng)用層相關(guān)模塊稱為“前端”，將網(wǎng)絡(luò)層相關(guān)模塊稱為“后端”。

如圖1所示，在分析物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)各部分功能與特點(diǎn)的基礎(chǔ)上，考慮到感知層實(shí)訓(xùn)設(shè)備的資源受限性和后期的擴(kuò)展性等因素［9－12］，本文采用基于表述性狀態(tài)傳遞（Representational State Transfer，REST）風(fēng)格的Web物聯(lián)網(wǎng)軟件開發(fā)體系，將感知層實(shí)訓(xùn)設(shè)備和應(yīng)用層實(shí)訓(xùn)應(yīng)用互聯(lián)起來，構(gòu)建物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)。

圖1 物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)架構(gòu)對(duì)比

對(duì)比傳統(tǒng)物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)，主要特點(diǎn)有：

（1）前后端分離開發(fā)：通過前后端分離的開發(fā)模式，使實(shí)訓(xùn)系統(tǒng)實(shí)現(xiàn)開發(fā)解耦。前端開發(fā)人員專注于各種物聯(lián)網(wǎng)實(shí)訓(xùn)場景的交互呈現(xiàn)，后端開發(fā)人員可專注于解決物聯(lián)網(wǎng)感知層的數(shù)據(jù)接入問題，互不干擾，可實(shí)現(xiàn)并行開發(fā)。

（2）組件庫設(shè)計(jì)：前端基于Vue構(gòu)建物聯(lián)網(wǎng)實(shí)訓(xùn)組件庫，通過組件復(fù)用的方式，實(shí)現(xiàn)基礎(chǔ)實(shí)訓(xùn)、智能家居、工業(yè)生產(chǎn)等多場景實(shí)訓(xùn)項(xiàng)目的快速開發(fā)，解決應(yīng)用層開發(fā)復(fù)雜度高的問題。

（3）渲染性能優(yōu)化：為減輕瀏覽器壓力，提升實(shí)訓(xùn)應(yīng)用使用體驗(yàn)，提出一種針對(duì)高渲染負(fù)荷實(shí)訓(xùn)場景的前端性能優(yōu)化方法，通過數(shù)據(jù)凍結(jié)的方式，提升實(shí)訓(xùn)應(yīng)用在大規(guī)模結(jié)點(diǎn)場景下的前端性能表現(xiàn)，解決傳統(tǒng)實(shí)訓(xùn)應(yīng)用體驗(yàn)不佳的問題。

1 前后端分離結(jié)構(gòu)設(shè)計(jì)

早期的Web開發(fā)以服務(wù)端渲染模式（Server-Side Rendering，SSR）為主，即客戶端HTML頁面是由后端服務(wù)器進(jìn)行渲染。服務(wù)器直接生產(chǎn)渲染好對(duì)應(yīng)的HTML頁面，返回給客戶端進(jìn)行展示。當(dāng)Web應(yīng)用需要請(qǐng)求不同的路徑內(nèi)容時(shí)，交給服務(wù)器來進(jìn)行處理，服務(wù)器渲染好整個(gè)頁面，并且將頁面返回給客戶端。通過以上流程渲染完成的頁面，不需要單獨(dú)加載額外文件，可直接發(fā)送到客戶端（瀏覽器）進(jìn)行展示。然而，在開發(fā)階段，整個(gè)頁面的模塊由后端人員負(fù)責(zé)開發(fā)、維護(hù)，在面對(duì)復(fù)雜的業(yè)務(wù)需求時(shí)，增加了系統(tǒng)的開發(fā)成本。同時(shí)，客戶端（前端）人員在進(jìn)行頁面開發(fā)時(shí)，需要通過PHP和Java等不同開發(fā)技術(shù)來編寫頁面代碼，增加了系統(tǒng)開發(fā)的難度。此外，系統(tǒng)代碼數(shù)據(jù)與業(yè)務(wù)邏輯耦合度較高，不利于實(shí)訓(xùn)系統(tǒng)后期的擴(kuò)展和維護(hù)。

袁傳璋之推算固亦準(zhǔn)《博物志》，但脫開《博物志》，其所推算亦能成立。人或以為袁氏“基點(diǎn)”說不能成立，其實(shí)這不過是找個(gè)支點(diǎn)，也無可無不可，我們覺得找一個(gè)“支點(diǎn)”或云“基點(diǎn)”，還是可以展開司馬遷生年的探討的。

為此，本文基于前后端分離模式構(gòu)建單頁面富應(yīng)用（Single Page Application，SPA）。如圖2所示，區(qū)別于服務(wù)端渲染，前后端分離結(jié)構(gòu)［13］最大的特點(diǎn)是實(shí)現(xiàn)了開發(fā)解耦。對(duì)于物聯(lián)網(wǎng)Web應(yīng)用開發(fā)來說，前端開發(fā)人員可以專注于各種物聯(lián)網(wǎng)場景的交互實(shí)現(xiàn)，后端開發(fā)人員可以專注于解決物聯(lián)網(wǎng)感知層的數(shù)據(jù)接入問題，實(shí)現(xiàn)并行開發(fā)。

圖2 物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)總體架構(gòu)

前端方面，即實(shí)訓(xùn)系統(tǒng)應(yīng)用層，利用前端框架Vue構(gòu)建物聯(lián)網(wǎng)組件庫，通過前端路由管理器（Vue Router）進(jìn)行細(xì)粒度的導(dǎo)航控制，靈活地管理前端UI組件，實(shí)現(xiàn)更復(fù)雜的頁面交互效果。同時(shí)利用前端開發(fā)活躍的組件生態(tài)，可將數(shù)據(jù)可視化等技術(shù)引入實(shí)訓(xùn)系統(tǒng)中，提升物聯(lián)網(wǎng)實(shí)訓(xùn)課程的教學(xué)效果。

后端方面，得益于該模式的松耦合性和靈活性，后端可選擇統(tǒng)一Web技術(shù)棧構(gòu)建實(shí)訓(xùn)系統(tǒng)后端服務(wù)器［14］。后端基于Node.js的Web開發(fā)框架Express構(gòu)建物聯(lián)網(wǎng)中間件服務(wù)器，除數(shù)據(jù)存儲(chǔ)外，為前端實(shí)訓(xùn)應(yīng)用提供JSON格式的數(shù)據(jù)接口服務(wù)。通過異步請(qǐng)求框架Axios（HTTP庫），實(shí)訓(xùn)前端應(yīng)用開發(fā)者可以很方便地調(diào)用后端接口，從而專注于實(shí)訓(xùn)頁面業(yè)務(wù)實(shí)現(xiàn)，有效提高物聯(lián)網(wǎng)實(shí)訓(xùn)應(yīng)用的開發(fā)效率。

2 前端組件庫設(shè)計(jì)及應(yīng)用

2.1 前端組件需求分析

實(shí)訓(xùn)系統(tǒng)需要支持物聯(lián)網(wǎng)實(shí)踐教學(xué)，將實(shí)訓(xùn)設(shè)備的控制處理與實(shí)際實(shí)訓(xùn)項(xiàng)目進(jìn)行一一對(duì)應(yīng)，提供從物聯(lián)網(wǎng)基礎(chǔ)、物聯(lián)網(wǎng)辦公應(yīng)用到物聯(lián)網(wǎng)生產(chǎn)典型應(yīng)用實(shí)訓(xùn)的課程內(nèi)容，設(shè)備功能配置具有開放性，同時(shí)便于學(xué)生動(dòng)手實(shí)踐。整體功能樹如圖3所示，物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)Web應(yīng)用主要分為三大模塊：后臺(tái)管理模塊、實(shí)訓(xùn)模塊（學(xué)生端）、實(shí)訓(xùn)模塊（教師端）。

圖3 實(shí)訓(xùn)系統(tǒng)前端功能模塊設(shè)計(jì)

重點(diǎn)對(duì)平臺(tái)整體進(jìn)行功能粗粒度分類，如表1所示，通過分析各個(gè)模塊功能重復(fù)情況，結(jié)合功能需求等級(jí)，整理出實(shí)訓(xùn)系統(tǒng)功能需求等級(jí)分布情況。其中實(shí)訓(xùn)模塊（學(xué)生端）為核心功能模塊，包含基礎(chǔ)實(shí)訓(xùn)應(yīng)用、智能家居、工業(yè)生產(chǎn)三大實(shí)訓(xùn)應(yīng)用場景，涉及設(shè)備數(shù)據(jù)可視化、實(shí)時(shí)交互、設(shè)備拓?fù)浣Y(jié)構(gòu)展示等實(shí)訓(xùn)功能。

表1 實(shí)訓(xùn)系統(tǒng)功能需求等級(jí)分布情況（＋代表需求等級(jí)低、＋＋代表中等、＋＋＋代表高）

2.2 物聯(lián)網(wǎng)實(shí)訓(xùn)組件庫應(yīng)用

由表1分析可知，實(shí)訓(xùn)模塊（學(xué)生端）涉及功能復(fù)雜，且不同場景下存在較多相似功能模塊。本文基于Vue構(gòu)建實(shí)訓(xùn)系統(tǒng)SPA應(yīng)用，在前端設(shè)計(jì)物聯(lián)網(wǎng)組件庫，根據(jù)不同實(shí)訓(xùn)場景，將頁面結(jié)構(gòu)、功能模塊拆分成多個(gè)子組件，組件與組件之間相互獨(dú)立，也可相互嵌入，分別進(jìn)行針對(duì)性開發(fā)，以此實(shí)現(xiàn)模塊復(fù)用，解決應(yīng)用層開發(fā)效率低等問題。

如圖4所示，以“基礎(chǔ)實(shí)訓(xùn)3-ZigBee的綜合應(yīng)用實(shí)訓(xùn)”為例，根據(jù)基礎(chǔ)實(shí)訓(xùn)功能需要，將實(shí)訓(xùn)頁面拆分以下主要功能模塊：①主題信息組件：展示當(dāng)前實(shí)訓(xùn)課程基本情況，包含操作臺(tái)編號(hào)、小組人數(shù)、實(shí)訓(xùn)時(shí)間、授課教師等基本信息；②操作臺(tái)組件：根據(jù)當(dāng)前實(shí)訓(xùn)課程網(wǎng)絡(luò)拓?fù)鋱D，提供可交互的可視化操作臺(tái)，直觀展示當(dāng)前操作臺(tái)設(shè)備連接情況；③設(shè)備參數(shù)組件：學(xué)生完成設(shè)備基本配置后，可點(diǎn)擊按鈕獲取感知層設(shè)備詳細(xì)信息；④網(wǎng)絡(luò)架構(gòu)組件：簡要展示實(shí)訓(xùn)設(shè)備網(wǎng)絡(luò)架構(gòu)圖。最后，通過主文件index.vue可以靈活地引入以上子組件。

圖4 基礎(chǔ)實(shí)訓(xùn)Web應(yīng)用功能模塊拆分

圖4中，（1）主題信息組件，（2）操作臺(tái)組件，（3）設(shè)備參數(shù)組件，（4）網(wǎng)絡(luò)架構(gòu)組件，以下類同。

利用已有統(tǒng)一實(shí)訓(xùn)組件，可以高效率地開發(fā)出其他實(shí)訓(xùn)課程應(yīng)用頁面。如圖5、圖6所示，智能家居實(shí)訓(xùn)與工業(yè)生產(chǎn)實(shí)訓(xùn)基本頁面功能相似，因此可基于上述可視化操作臺(tái)等組件進(jìn)行二次開發(fā)，快速拓展出其他實(shí)訓(xùn)場景，避免重復(fù)開發(fā)，提升開發(fā)效率。

圖5 智能家居實(shí)訓(xùn)功能實(shí)現(xiàn)

圖6 工業(yè)生產(chǎn)實(shí)訓(xùn)功能實(shí)現(xiàn)

此外，前端可以通過引入第三方庫的方式，構(gòu)建公共功能組件庫。如圖7所示，通過物聯(lián)網(wǎng)組件庫和第三方組件庫組合，可以快速完成課堂管理和設(shè)備管理等功能模塊。隨著物聯(lián)網(wǎng)組件庫的不斷豐富，后期可以滿足更多類型、更加復(fù)雜的實(shí)訓(xùn)場景應(yīng)用需求。

圖7 實(shí)訓(xùn)系統(tǒng)部分功能實(shí)現(xiàn)（教師端）

3 前端渲染性能優(yōu)化

3.1 優(yōu)化背景及原理

SPA將服務(wù)器端的頁面渲染邏輯和業(yè)務(wù)控制邏輯提前到瀏覽器層級(jí)上，減輕了服務(wù)器的壓力，加強(qiáng)了前端的異步展示的能力，同時(shí)也將前端渲染壓力放在了本地瀏覽器上。隨著物聯(lián)網(wǎng)實(shí)訓(xùn)場景的豐富，前端實(shí)訓(xùn)應(yīng)用交互會(huì)變得更加復(fù)雜，在硬件性能不高的終端上，會(huì)造成頁面渲染緩慢，甚至瀏覽器崩潰的問題。

為了同時(shí)兼顧開發(fā)效率與Web前端性能問題，各個(gè)主流開發(fā)框架相繼推出了性能瓶頸優(yōu)化方案，其核心為Diff算法的應(yīng)用［15－16］。改進(jìn)Diff算法可以提升前端性能，但隨著開發(fā)框架的更迭，Vue融合了snabbdom庫等其他優(yōu)秀改進(jìn)算法，性能表現(xiàn)已十分出眾，因此改進(jìn)Diff算法提升有限。此外，改進(jìn)Diff算法需改動(dòng)框架源碼，無法針對(duì)特定前端組件進(jìn)行優(yōu)化，靈活度低，針對(duì)性較差。

針對(duì)以上情況，本文從物聯(lián)網(wǎng)組件角度，提出一種針對(duì)物聯(lián)網(wǎng)實(shí)訓(xùn)組件的性能優(yōu)化方法：組件庫開發(fā)前，在數(shù)據(jù)展示需求層面，首先對(duì)物聯(lián)網(wǎng)組件進(jìn)行分類，將其分為常規(guī)組件和靜態(tài)組件。將需要大數(shù)據(jù)量展示的組件定義為靜態(tài)組件，然后通過Object.freeze（）方法，將靜態(tài)組件進(jìn)行數(shù)據(jù)凍結(jié)。

優(yōu)化原理：如圖8所示，在進(jìn)行頁面開發(fā)時(shí)，Vue默認(rèn)會(huì)對(duì)每個(gè)數(shù)組數(shù)據(jù)的每一層屬性，添加雙向數(shù)據(jù)綁定機(jī)制，實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)效果。組件數(shù)組對(duì)象越大，雙向數(shù)據(jù)綁定耗時(shí)越多，而利用Object.freeze（）數(shù)據(jù)凍結(jié)的方法可以避免雙向綁定，減少頁面整體渲染耗時(shí)，提升性能表現(xiàn)。物聯(lián)網(wǎng)應(yīng)用中經(jīng)常存在信息展示場景，如實(shí)訓(xùn)應(yīng)用中的網(wǎng)絡(luò)架構(gòu)組件等，因此，可利用以上方法進(jìn)行渲染性能優(yōu)化，改善前端實(shí)訓(xùn)應(yīng)用使用體驗(yàn)。

圖8 組件優(yōu)化主要流程

3.2 實(shí)驗(yàn)分析

實(shí)驗(yàn)工具為Chrome瀏覽器87.0.4280版本，Vue版本為2.5.2。通過Chrome開發(fā)者工具搭建組件性能測試平臺(tái)，對(duì)常規(guī)組件，靜態(tài)組件進(jìn)行性能測試。首先使用它們生成一定數(shù)據(jù)量的列表，以此模擬不同渲染壓力下的組件場景，最后記錄并分析每組實(shí)驗(yàn)中兩者的初次渲染時(shí)間。測試分為橫向測試和縱向測試，橫向測試用作對(duì)比同一數(shù)據(jù)規(guī)模下兩者的性能優(yōu)劣，縱向測試用作對(duì)比不同數(shù)據(jù)規(guī)模下的性能差異。

如圖9所示，在初次渲染500行列表時(shí)，常規(guī)組件平均耗時(shí)41.1 ms，靜態(tài)組件平均耗時(shí)22.3 ms，靜態(tài)組件實(shí)驗(yàn)表現(xiàn)更佳。

圖9 橫向?qū)Ρ冉Y(jié)果（渲染500行列表）

如圖10所示，在初次渲染1000行列表時(shí)，常規(guī)組件平均耗時(shí)52.7 ms，靜態(tài)組件平均耗時(shí)36.8 ms，提升幅度約為30.1%；初次渲染10000行列表時(shí)，常規(guī)組件平均耗時(shí)364.6 ms，靜態(tài)組件平均耗時(shí)232.6 ms，提升幅度約為36.2%。綜合多次實(shí)驗(yàn)數(shù)據(jù)可得，處理數(shù)據(jù)越多，靜態(tài)組件性能表現(xiàn)越好，驗(yàn)證了經(jīng)數(shù)據(jù)凍結(jié)的靜態(tài)組件可以減少瀏覽器渲染時(shí)長，有助于提升物聯(lián)網(wǎng)實(shí)訓(xùn)組件性能，提升前端實(shí)訓(xùn)應(yīng)用使用體驗(yàn)。

圖10 縱向?qū)Ρ冉Y(jié)果（渲染1000至10000行列表）

4 結(jié)語

區(qū)別于傳統(tǒng)嵌入式物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)，本文針對(duì)實(shí)訓(xùn)系統(tǒng)應(yīng)用層的需求特點(diǎn)，提出一種基于Web的物聯(lián)網(wǎng)實(shí)訓(xùn)系統(tǒng)開發(fā)方案，其核心思想是：基于前后端分離的開發(fā)架構(gòu)，利用Vue構(gòu)建物聯(lián)網(wǎng)前端組件庫，通過組件復(fù)用的方式快速開發(fā)基礎(chǔ)實(shí)訓(xùn)、智能家居、工業(yè)生產(chǎn)等多場景前端應(yīng)用，提高實(shí)訓(xùn)項(xiàng)目開發(fā)效率的同時(shí)，為學(xué)生、教師提供多元化的實(shí)訓(xùn)交互界面。

同時(shí)，為進(jìn)一步提升實(shí)訓(xùn)應(yīng)用使用體驗(yàn)，從物聯(lián)網(wǎng)組件角度，提出一種針對(duì)大規(guī)模實(shí)訓(xùn)組件的優(yōu)化方法，實(shí)驗(yàn)結(jié)果表明，所提方法在實(shí)訓(xùn)組件渲染速度上表現(xiàn)出較好的性能，且組件數(shù)據(jù)越多，靜態(tài)組件性能提升幅度越大，有效降低前端渲染性能壓力，能滿足未來不斷擴(kuò)展的實(shí)訓(xùn)前端應(yīng)用需求。