摘要:本文介紹了actionscript3技術(shù)在熱點圖實現(xiàn)中的應(yīng)用,很好的解決了熱點圖數(shù)據(jù)發(fā)布的直觀性問題,同時將該技術(shù)的可維護(hù)及擴(kuò)展性進(jìn)行了說明。最后通過不同的數(shù)據(jù)采樣實驗,將基于actionscript3技術(shù)的熱點圖與基于html5的熱點圖在內(nèi)存,CPU消耗,F(xiàn)PS等圖像渲染性能方面進(jìn)行了對比,得出結(jié)論為基于actionscript3技術(shù)的熱點圖的整體性能優(yōu)于基于html5的整體性能。
關(guān)鍵詞:Actionscript3;熱點圖;數(shù)據(jù)可視化
中圖分類號:TP311.52 文獻(xiàn)標(biāo)識碼:A 文章編號:1007-9599 (2012) 23-0000-02
1 ActionScript3技術(shù)背景
Actionscript3技術(shù)結(jié)合了c/s架構(gòu)和b/s架構(gòu)的優(yōu)點,能夠提供更豐富,更互動和更快響應(yīng)的用戶體驗。本文探討了actionscript3技術(shù)在熱點圖實現(xiàn)中的應(yīng)用,并說明了該技術(shù)的可擴(kuò)展性和可維護(hù)性。
2 現(xiàn)有的解決技術(shù)
2.1 HTML5
(1)HTML5的概念[2]。HTML5是包括HTML,CSS和JavaScript在內(nèi)的一套技術(shù)組合.HTML5具有簡單的語義特性,本地存儲特性,設(shè)備兼容特性,支持css3的特性.
(2)HTML5在熱點圖的運用。Heatmapjs是一個基于js+html5的熱圖開源項目。它的主要原理是利用腳本語言javascript操控canvas,根據(jù)用戶行為產(chǎn)生的數(shù)據(jù)在canvas上繪制出來。
2.2 ActionScript3技術(shù)
As3遵從ECMAScript語言規(guī)范,而ECMAScript是所有編程語言的國際規(guī)范化的語言,這就意味著所有能用到ECMAScript語言的地方都可以將As3進(jìn)行平滑移植。
As3由嵌入在flashplayer的ActionScript虛擬機(jī)(AVM2)中執(zhí)行,從flashplayer10.0開始As3內(nèi)置了支持解析Json數(shù)據(jù)的類,而As3原生支持解析XML[4],這就說明As3支持所有主流的網(wǎng)絡(luò)數(shù)據(jù)類型,具有良好的可維護(hù)性和可擴(kuò)展性。
3 熱點圖總體設(shè)計
3.1 熱點圖概述
熱點圖是一種將一些原本不易理解或表達(dá)的數(shù)據(jù),比如密度,頻率,溫度等,用區(qū)域和顏色這種更容易被人理解的方式來呈現(xiàn)的一種數(shù)據(jù)可視化方式。熱點圖在互聯(lián)網(wǎng)用戶行為分析上扮演著重要的角色,常見的熱點圖應(yīng)用有,鼠標(biāo)點擊熱點圖;屏幕滾動熱圖;眼動熱圖;用戶地區(qū)熱圖。
3.2 實現(xiàn)熱點圖的技術(shù)架構(gòu)
基于As3的熱點圖采用MVC的設(shè)計模式[5]實現(xiàn),分離了表現(xiàn)層,邏輯層,數(shù)據(jù)和業(yè)務(wù)層
技術(shù)架構(gòu)如下:表現(xiàn)層:As3實現(xiàn),負(fù)責(zé)展示熱點圖數(shù)據(jù)和用戶交互→邏輯層:As3實現(xiàn),負(fù)責(zé)渲染熱點圖數(shù)據(jù)到表現(xiàn)層→數(shù)據(jù)層:As3+python,負(fù)責(zé)處理python推送到as3的熱點圖數(shù)據(jù)→業(yè)務(wù)層:python
熱點圖表現(xiàn)層作為用戶界面,負(fù)責(zé)用戶和數(shù)據(jù)的交互,采用As3技術(shù)實現(xiàn)數(shù)據(jù)渲染.利用as3讀取和解析xml和json數(shù)據(jù)來實現(xiàn)渲染邏輯。一個好的用戶體驗是無縫的,不需要用戶過多的思考如何查看。使用As3技術(shù)滿足上述要求,可以帶來豐富和良好的用戶體驗.邏輯層主要負(fù)責(zé)數(shù)據(jù)渲染邏輯,通過as3實現(xiàn)。將數(shù)據(jù)點轉(zhuǎn)成不同顏色的小球,采用融合模式渲染到屏幕上。渲染顏色的深淺與屏幕坐標(biāo)附近點的個數(shù)相關(guān),點越多渲染的顏色就越深。網(wǎng)頁熱點圖和服務(wù)器端的交互通過服務(wù)器端程序python推送json和xml數(shù)據(jù)來完成。Python是一種服務(wù)器端的編程語言,在本文項目中,它主要負(fù)責(zé)生成用戶點擊點的屏幕坐標(biāo)數(shù)據(jù)。
3.3 可維護(hù)及擴(kuò)展性解決方案
可維護(hù)性是指在應(yīng)用交付使用之后直至應(yīng)用被淘汰的整個時期內(nèi)為了改正錯誤或滿足新的需求而修改應(yīng)用程序的活動[8]。
可擴(kuò)展性是指應(yīng)用程序能擴(kuò)展處理更大規(guī)模的業(yè)務(wù),應(yīng)對未來可能需要進(jìn)行的修改.它以添加新功能或修改完善現(xiàn)有功能來考慮應(yīng)用程序的未來成長??蓴U(kuò)展性是軟件拓展系統(tǒng)的能力[8].
基于as3的熱點圖實現(xiàn),只需要遵守數(shù)據(jù)傳輸協(xié)議,就可以實現(xiàn)處理更大規(guī)模的業(yè)務(wù),比如海量用戶點擊數(shù)據(jù)。因為采用mvc的設(shè)計模式實現(xiàn),使得邏輯層和表現(xiàn)層分離,可以方便的添加新功能或者修改完善現(xiàn)有功能,所以采用as3實現(xiàn)熱點圖具有良好的可維護(hù)及擴(kuò)展性。
4 實驗與對比
4.1 實驗說明
分別采用as3技術(shù)和html5技術(shù)實現(xiàn)如下場景:
生成一個廣告頁面,頁面讀取采樣好的用戶點擊行為數(shù)據(jù),將其轉(zhuǎn)換成熱點圖。頁面布置在相同的服務(wù)器上,頁面讀取服務(wù)器端程序推送出的模擬137個虛擬實時用戶點擊行為的數(shù)據(jù),頁面運行時間為一小時。服務(wù)器配置是帶有6G內(nèi)存的處理器Intel? Pentium? CPU B940 @ 2.00GHz 2.00 GHz,運行的是64位win7操作系統(tǒng)。頁面瀏覽器采用相同的瀏覽器chrome 19。
4.2 性能對比
表1是as3和html5對應(yīng)的熱點圖所需的服務(wù)器資源。FPS是frame per second的簡稱,即每秒渲染幀數(shù),F(xiàn)PS數(shù)值越高代表程序運行越流暢,CPU占用率越低.
下面是測試as3和html5對應(yīng)熱點圖的渲染性能的結(jié)果,測試指標(biāo)為將137個用戶數(shù)據(jù)點渲染成對應(yīng)的熱點所需時間:
由表2可見,HTML5的平均渲染時間和As3的平均渲染時間持平,也就說明html5在繪制canvas上所耗費的時間和as3對Bitmapdata操作所用時間相同
5 結(jié)束語
熱點圖在很大程度上幫助網(wǎng)站主,廣告主了解用戶瀏覽行為。本文闡述了熱點圖的整體架構(gòu)設(shè)計,采用as3技術(shù)實現(xiàn)網(wǎng)頁熱點圖的表現(xiàn)層和邏輯層,討論了as3熱點圖的渲染技術(shù)。并對as3熱點圖的可維護(hù)性及可擴(kuò)展性進(jìn)行了說明,本文還對比了基于html5的熱點圖實現(xiàn)和基于as3的熱點圖實現(xiàn),得出基于as3的熱點圖實現(xiàn)的整體性能優(yōu)于基于html5的熱點圖的整體性能的結(jié)論。
參考文獻(xiàn):
[1]Julie Steele Noah lliinsky.Beautiful Visualization.apress,2011.
[2]Steve Fulton Jeff Fulton.HTML5 Canvas.apress,2011.
[3]Darren Richardson with Paul Milbourne.Foundation ActionScript 3.0 for Flash and Flex.apress,2009.
[4]Sas Jacobs.Foundation XML and E4X for Flash and Flex.apress,2009.
[5]Joey Lott and Danny Patterson.ActionScript3.0 with Design patterns.Peachpit Press,2007.
[6]Joey Lott and Danny Patterson.AdvancED ActionScript 3.0:Design Patterns.Peachpit Press,2007.
[7]Todd Yard.Foundation ActionScript 3.0 Image Effects.apress,2009.
[8]薩默維爾.軟件工程(原書第9版)[M].程成.北京:機(jī)械工業(yè)出版社,2011.