基于Actionscript3的熱點圖的設計與實現(xiàn)

摘要：本文介紹了actionscript3技術(shù)在熱點圖實現(xiàn)中的應用，很好的解決了熱點圖數(shù)據(jù)發(fā)布的直觀性問題，同時將該技術(shù)的可維護及擴展性進行了說明。最后通過不同的數(shù)據(jù)采樣實驗，將基于actionscript3技術(shù)的熱點圖與基于html5的熱點圖在內(nèi)存，CPU消耗，F(xiàn)PS等圖像渲染性能方面進行了對比，得出結(jié)論為基于actionscript3技術(shù)的熱點圖的整體性能優(yōu)于基于html5的整體性能。

關(guān)鍵詞：Actionscript3；熱點圖；數(shù)據(jù)可視化

中圖分類號：TP311.52 文獻標識碼：A 文章編號：1007-9599 （2012） 23-0000-02

1 ActionScript3技術(shù)背景

Actionscript3技術(shù)結(jié)合了c/s架構(gòu)和b/s架構(gòu)的優(yōu)點，能夠提供更豐富，更互動和更快響應的用戶體驗。本文探討了actionscript3技術(shù)在熱點圖實現(xiàn)中的應用，并說明了該技術(shù)的可擴展性和可維護性。

2 現(xiàn)有的解決技術(shù)

2.1 HTML5

（1）HTML5的概念[2]。HTML5是包括HTML，CSS和JavaScript在內(nèi)的一套技術(shù)組合.HTML5具有簡單的語義特性，本地存儲特性，設備兼容特性，支持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進行平滑移植。

As3由嵌入在flashplayer的ActionScript虛擬機（AVM2）中執(zhí)行，從flashplayer10.0開始As3內(nèi)置了支持解析Json數(shù)據(jù)的類，而As3原生支持解析XML[4]，這就說明As3支持所有主流的網(wǎng)絡數(shù)據(jù)類型，具有良好的可維護性和可擴展性。

3 熱點圖總體設計

3.1 熱點圖概述

熱點圖是一種將一些原本不易理解或表達的數(shù)據(jù)，比如密度，頻率，溫度等，用區(qū)域和顏色這種更容易被人理解的方式來呈現(xiàn)的一種數(shù)據(jù)可視化方式。熱點圖在互聯(lián)網(wǎng)用戶行為分析上扮演著重要的角色，常見的熱點圖應用有，鼠標點擊熱點圖；屏幕滾動熱圖；眼動熱圖；用戶地區(qū)熱圖。

3.2 實現(xiàn)熱點圖的技術(shù)架構(gòu)

基于As3的熱點圖采用MVC的設計模式[5]實現(xiàn)，分離了表現(xiàn)層，邏輯層，數(shù)據(jù)和業(yè)務層

技術(shù)架構(gòu)如下：表現(xiàn)層：As3實現(xiàn)，負責展示熱點圖數(shù)據(jù)和用戶交互→邏輯層：As3實現(xiàn)，負責渲染熱點圖數(shù)據(jù)到表現(xiàn)層→數(shù)據(jù)層：As3+python，負責處理python推送到as3的熱點圖數(shù)據(jù)→業(yè)務層：python

熱點圖表現(xiàn)層作為用戶界面，負責用戶和數(shù)據(jù)的交互，采用As3技術(shù)實現(xiàn)數(shù)據(jù)渲染.利用as3讀取和解析xml和json數(shù)據(jù)來實現(xiàn)渲染邏輯。一個好的用戶體驗是無縫的，不需要用戶過多的思考如何查看。使用As3技術(shù)滿足上述要求，可以帶來豐富和良好的用戶體驗.邏輯層主要負責數(shù)據(jù)渲染邏輯，通過as3實現(xiàn)。將數(shù)據(jù)點轉(zhuǎn)成不同顏色的小球，采用融合模式渲染到屏幕上。渲染顏色的深淺與屏幕坐標附近點的個數(shù)相關(guān)，點越多渲染的顏色就越深。網(wǎng)頁熱點圖和服務器端的交互通過服務器端程序python推送json和xml數(shù)據(jù)來完成。Python是一種服務器端的編程語言，在本文項目中，它主要負責生成用戶點擊點的屏幕坐標數(shù)據(jù)。

3.3 可維護及擴展性解決方案

可維護性是指在應用交付使用之后直至應用被淘汰的整個時期內(nèi)為了改正錯誤或滿足新的需求而修改應用程序的活動[8]。

可擴展性是指應用程序能擴展處理更大規(guī)模的業(yè)務，應對未來可能需要進行的修改.它以添加新功能或修改完善現(xiàn)有功能來考慮應用程序的未來成長?？蓴U展性是軟件拓展系統(tǒng)的能力[8].

基于as3的熱點圖實現(xiàn)，只需要遵守數(shù)據(jù)傳輸協(xié)議，就可以實現(xiàn)處理更大規(guī)模的業(yè)務，比如海量用戶點擊數(shù)據(jù)。因為采用mvc的設計模式實現(xiàn)，使得邏輯層和表現(xiàn)層分離，可以方便的添加新功能或者修改完善現(xiàn)有功能，所以采用as3實現(xiàn)熱點圖具有良好的可維護及擴展性。

4 實驗與對比

4.1 實驗說明

分別采用as3技術(shù)和html5技術(shù)實現(xiàn)如下場景：

生成一個廣告頁面，頁面讀取采樣好的用戶點擊行為數(shù)據(jù)，將其轉(zhuǎn)換成熱點圖。頁面布置在相同的服務器上，頁面讀取服務器端程序推送出的模擬137個虛擬實時用戶點擊行為的數(shù)據(jù)，頁面運行時間為一小時。服務器配置是帶有6G內(nèi)存的處理器Intel? Pentium? CPU B940 @ 2.00GHz 2.00 GHz，運行的是64位win7操作系統(tǒng)。頁面瀏覽器采用相同的瀏覽器chrome 19。

4.2 性能對比

表1是as3和html5對應的熱點圖所需的服務器資源。FPS是frame per second的簡稱，即每秒渲染幀數(shù)，F(xiàn)PS數(shù)值越高代表程序運行越流暢，CPU占用率越低.

下面是測試as3和html5對應熱點圖的渲染性能的結(jié)果，測試指標為將137個用戶數(shù)據(jù)點渲染成對應的熱點所需時間：

由表2可見，HTML5的平均渲染時間和As3的平均渲染時間持平，也就說明html5在繪制canvas上所耗費的時間和as3對Bitmapdata操作所用時間相同

5 結(jié)束語

熱點圖在很大程度上幫助網(wǎng)站主，廣告主了解用戶瀏覽行為。本文闡述了熱點圖的整體架構(gòu)設計，采用as3技術(shù)實現(xiàn)網(wǎng)頁熱點圖的表現(xiàn)層和邏輯層，討論了as3熱點圖的渲染技術(shù)。并對as3熱點圖的可維護性及可擴展性進行了說明，本文還對比了基于html5的熱點圖實現(xiàn)和基于as3的熱點圖實現(xiàn)，得出基于as3的熱點圖實現(xiàn)的整體性能優(yōu)于基于html5的熱點圖的整體性能的結(jié)論。

參考文獻：

[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].程成.北京：機械工業(yè)出版社，2011.