基于WebGL的瀏覽器遠(yuǎn)程交互技術(shù)優(yōu)化研究

關(guān)鍵詞：WebGL協(xié)議;瀏覽器遠(yuǎn)程交互;技術(shù)優(yōu)化

中圖分類號(hào)：TP393.09 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2019）06-0067-03

Abstract：Remote interaction is a technology based on some communication protocol，which enables users to control another computer remotely on one computer and realize desktop/graphics sharing. VNC，DCV and VirtualGL used C/S interaction，focusing on three-dimensional accelerated rendering，but browser rendering technology is less studied，while B/S interaction lacks the direction and means of performance optimization. For this reason，this paper is based on VNC protocol and WebGL rendering graphics，new optimization ideas are explored from three levels of architecture，algorithm and code，and a comparative analysis is made.

Keywords：WebGL protocol;browser remote interaction;technological optimization

1 ?技術(shù)背景

眾所周知，遠(yuǎn)程控制技術(shù)有C/S、B/S兩種架構(gòu)，C/S架構(gòu)具有擴(kuò)展性差、運(yùn)維成本高等缺點(diǎn)[1]。在HTML5標(biāo)準(zhǔn)獲得廣泛認(rèn)可和支持的背景下，可以判斷現(xiàn)代瀏覽器將成為新的客戶端，SVG/Canvas/WebGL將成為新的渲染引擎。企業(yè)運(yùn)行過(guò)程中應(yīng)用到的眾多大型軟件能夠在不同終端實(shí)現(xiàn)在線渲染，實(shí)時(shí)交互。特別是考慮到數(shù)字化云平臺(tái)形成以后，基于瀏覽器的遠(yuǎn)程交互將為虛擬桌面的推廣應(yīng)用提供新的方式;同時(shí)在遠(yuǎn)程交互技術(shù)市場(chǎng)化中，形成具有技術(shù)優(yōu)勢(shì)的先進(jìn)產(chǎn)品。

瀏覽器實(shí)現(xiàn)遠(yuǎn)程交互有兩種方法，一是將瀏覽器視為軟件，拿到數(shù)據(jù)后就可以進(jìn)行計(jì)算和渲染。這一方法的實(shí)現(xiàn)必須掌握軟件的源代碼，改寫(xiě)整個(gè)軟件。部分企業(yè)不具有這個(gè)實(shí)力，并且通過(guò)進(jìn)行初步的測(cè)試，發(fā)現(xiàn)延時(shí)很?chē)?yán)重，瀏覽器開(kāi)銷(xiāo)很大。另一種方法是將瀏覽器視為顯示工具，只需要重新實(shí)現(xiàn)VNC/RDP/DCV等客戶端的協(xié)議解析和圖形顯示功能。目前，包括OpenStack在內(nèi)的很多公司的開(kāi)源項(xiàng)目都集成了noVNC組件。一些企業(yè)的數(shù)字化云平臺(tái)中也集成了該組件，它是基于HTML5技術(shù)，通過(guò)瀏覽器為用戶提供遠(yuǎn)程交互服務(wù)。但是，在實(shí)際應(yīng)用和測(cè)試中我們發(fā)現(xiàn)，noVNC存在較大的性能瓶頸，對(duì)用戶操作的響應(yīng)速度較慢，有時(shí)延時(shí)長(zhǎng)達(dá)10～30秒。這將嚴(yán)重影響用戶的操作體驗(yàn)，不利于桌面虛擬化服務(wù)的推廣。

2 ?技術(shù)思路

C/S架構(gòu)下的VNC（Virtual Network Computing）主要由VNC Client、VNC Server和RFB（Remote Frame Buffer）協(xié)議組成。通過(guò)網(wǎng)絡(luò)傳送鼠標(biāo)、鍵盤(pán)的消息以及桌面的更新圖像數(shù)據(jù)，實(shí)現(xiàn)計(jì)算機(jī)間的遠(yuǎn)程共享和遠(yuǎn)程操作。圖形在VNC Viewer通過(guò)系統(tǒng)的圖形DirectX、OpenGL進(jìn)行渲染。

noVNC的B/S架構(gòu)是目前在基于瀏覽器遠(yuǎn)程交互的實(shí)現(xiàn)中使用最多的，我們的目標(biāo)是基于noVNC進(jìn)行改進(jìn)。在明確了VNC輸出到瀏覽器的性能瓶頸的基礎(chǔ)上，按照“從開(kāi)源中來(lái)到開(kāi)源中去”的思路。首先，利用noVNC項(xiàng)目快速搭建一個(gè)能在瀏覽器中進(jìn)行遠(yuǎn)程交互的開(kāi)發(fā)環(huán)境。然后，按照“異步處理+多進(jìn)程計(jì)算+分幀渲染”的優(yōu)化策略，綜合采用WebGL、WebWorker等新技術(shù)，逐步改造noNVC的交互顯示流程。最后與云平臺(tái)進(jìn)行集成，在生產(chǎn)環(huán)境中對(duì)比應(yīng)用效果。

3 ?基于WebGL的技術(shù)優(yōu)化

3.1 ?WebGL原理

WebGL（Web Graphics Library）是一種繪圖協(xié)議，允許把JavaScript和OpenGL ES2.0結(jié)合在一起。瀏覽器無(wú)須任何插件，即可實(shí)現(xiàn)交互式3D和2D圖形渲染，并可利用顯卡硬件進(jìn)行加速。

3.2 ?瀏覽器遠(yuǎn)程交互調(diào)優(yōu)

主要包括架構(gòu)優(yōu)化、算法優(yōu)化、代碼優(yōu)化三個(gè)方面，具體如下：

（1）架構(gòu)優(yōu)化中NoVNC、Guacamole容器、源碼性能測(cè)試犧牲5%的性能，換取更便捷的大規(guī)模部署，選擇noVNC繼續(xù)進(jìn)行優(yōu)化。

（2）算法優(yōu)化直接創(chuàng)建一個(gè)虛擬的顯卡驅(qū)動(dòng)，在應(yīng)用程序呼叫操作系統(tǒng)需要改變圖形顯示的時(shí)候，事先截取應(yīng)用程序需要顯示的區(qū)域和內(nèi)容，并緩沖到內(nèi)存中。與實(shí)時(shí)捕獲屏幕并比較差異的方法比較具有CPU占用率小，實(shí)時(shí)性強(qiáng);不需要比較差異，因?yàn)榻厝〉木褪遣町惒糠值膱D像緩沖等優(yōu)點(diǎn)。

（3）代碼優(yōu)化中老版本的WebSocket協(xié)議采用文本傳輸，所有的圖片、音頻等數(shù)據(jù)都必須經(jīng)過(guò)base64.js實(shí)現(xiàn)編碼轉(zhuǎn)換，但是base64編解碼器等運(yùn)算復(fù)雜，最初做法是比照C、C++版本，實(shí)現(xiàn)相應(yīng)的JS版本，現(xiàn)在通過(guò)WebAssembly實(shí)現(xiàn)，直接轉(zhuǎn)碼，該技術(shù)由Mozilla、谷歌、微軟及蘋(píng)果聯(lián)合開(kāi)發(fā)。

3.3 ?實(shí)驗(yàn)內(nèi)容和效果對(duì)比

3.3.1 ?基線環(huán)境部署

（1）Linux環(huán)境：

操作系統(tǒng)：Ubuntu16.04;CPU：?jiǎn)魏?VNC Server：X11VNC;

用途：測(cè)試架構(gòu)優(yōu)化效果;內(nèi)存：1GB VNC Client：noVNC。

（2）Windows環(huán)境：

操作系統(tǒng)：Windows7;CPU：?jiǎn)魏?VNC Server：UltraVNC;

用途：測(cè)試算法優(yōu)化效果;內(nèi)存：2GB;VNC Client：noVNC。

3.3.2 ?架構(gòu)優(yōu)化效果對(duì)比

（1）Docker部署Guacamole：

安裝Docker;

拉取image;

配置、運(yùn)行各容器。

（2）源碼部署Guacamole：

安裝基礎(chǔ)包，eg.libpng12-dev，libvncserver-dev;

下載、編譯、安裝guacamole-server;

下載guacamole-client.war;

安裝Java、Tomcat;

Tomcat部署guacamole。

1）通過(guò)登錄、拖拽、輸入三種場(chǎng)景操作反應(yīng)時(shí)間對(duì)比可以看出（如圖1所示），Docker部署代價(jià)≈20%，而Guacamole≈1.2*noVNC。

2）通過(guò)登錄、拖拽、輸入三種網(wǎng)絡(luò)流量匯總對(duì)比可以看出（如圖2所示），Guacamole≈7*noVNC;性能提升有網(wǎng)絡(luò)帶寬的代價(jià)。

部署UltraVNC+noVNC，安裝mirror driver插件。應(yīng)用System Hook策略，效果輸入、拖拽、鼠標(biāo)有較明顯延遲;CPU占用≈10%。應(yīng)該Mirror Driver策略效果輸入、拖拽、鼠標(biāo)非常流暢;CPU占用≈5%。mirror driver打開(kāi)確實(shí)比system hook更流暢了，但是它壓縮后已經(jīng)不是一般圖片了，無(wú)法查看。

3.3.4 ?代碼優(yōu)化效果對(duì)比

采用WebAssembly調(diào)用后效果是：更小的文件體積，base64.js：4.3KB、base64.wasm：988B<-base64.cpp：3.5KB;更快的執(zhí)行速度，base64.wasm≈70%*base64.js。

采用WebGL調(diào)用后硬件加速有代價(jià)、分水嶺≈100萬(wàn)點(diǎn)。

4 ?結(jié) ?論

通過(guò)瀏覽器遠(yuǎn)程操控桌面是一種便捷方式，而性能優(yōu)化是其推廣應(yīng)用中的關(guān)鍵問(wèn)題。本項(xiàng)目首次在瀏覽器使用WebGL優(yōu)化圖形渲染，并且分別在Linux、Windows環(huán)境對(duì)技術(shù)的可行性和有效性進(jìn)行了定量的測(cè)試與分析，在規(guī)定時(shí)間、規(guī)定經(jīng)費(fèi)條件下，以noVNC為標(biāo)線，從架構(gòu)、算法、代碼三方面對(duì)比了調(diào)優(yōu)效果。實(shí)驗(yàn)證明優(yōu)化的關(guān)鍵在圖像更新算法，其性能需要權(quán)衡網(wǎng)絡(luò)帶寬開(kāi)銷(xiāo)。研究成果指明了瀏覽器遠(yuǎn)程交互技術(shù)的性能瓶頸，為后續(xù)Web項(xiàng)目的開(kāi)發(fā)、調(diào)優(yōu)提供了全新思路。

參考文獻(xiàn)：

[1] 白云.基于北斗導(dǎo)航與WebGIS的礦場(chǎng)人員監(jiān)控系統(tǒng)詳細(xì)設(shè)計(jì) [J].現(xiàn)代信息科技，2018，2（10）：23-25.

[2] 李華偉，李芹，王瑜.瀏覽器輔助對(duì)象技術(shù)的應(yīng)用與設(shè)計(jì)方法 [J].中國(guó)新技術(shù)新產(chǎn)品，2012（4）：9.

作者簡(jiǎn)介：魏國(guó)（1983.06-），男，漢族，天津人，主任工程師，中級(jí)工程師，本科，研究方向：信息技術(shù)、軟件開(kāi)發(fā)、大數(shù)據(jù)分析、互聯(lián)網(wǎng)技術(shù)。