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

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

中圖分類號：TP393.09 ? ? 文獻標識碼：A 文章編號：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ù)背景

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

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

2 ?技術(shù)思路

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

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

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

3.1 ?WebGL原理

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

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

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

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

（2）算法優(yōu)化直接創(chuàng)建一個虛擬的顯卡驅(qū)動，在應(yīng)用程序呼叫操作系統(tǒng)需要改變圖形顯示的時候，事先截取應(yīng)用程序需要顯示的區(qū)域和內(nèi)容，并緩沖到內(nèi)存中。與實時捕獲屏幕并比較差異的方法比較具有CPU占用率小，實時性強;不需要比較差異，因為截取的就是差異部分的圖像緩沖等優(yōu)點。

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

3.3 ?實驗內(nèi)容和效果對比

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

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

操作系統(tǒng)：Ubuntu16.04;CPU：單核;VNC Server：X11VNC;

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

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

操作系統(tǒng)：Windows7;CPU：單核;VNC Server：UltraVNC;

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

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

（1）Docker部署Guacamole：

安裝Docker;

拉取image;

配置、運行各容器。

（2）源碼部署Guacamole：

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

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

下載guacamole-client.war;

安裝Java、Tomcat;

Tomcat部署guacamole。

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

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

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

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

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

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

4 ?結(jié) ?論

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

參考文獻：

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

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

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